Skip to content

Instantly share code, notes, and snippets.

@dr-dimitru
Last active April 18, 2016 01:53
Show Gist options
  • Save dr-dimitru/7164555 to your computer and use it in GitHub Desktop.
Save dr-dimitru/7164555 to your computer and use it in GitHub Desktop.
Blinking cursor | Safari, FF, Opera, Chrome - 100% support | Example here: http://ostr.io
<html>
<head>
<style>
span.cursor {
-webkit-animation: blink 2s steps(1) infinite;
-moz-animation: blink 2s steps(1) infinite;
-ms-animation: blink 2s steps(1) infinite;
-o-animation: blink 2s steps(1) infinite;
animation: blink 2s steps(1) infinite;
}
@-webkit-keyframes blink {
from, 49% { background: #222; color: #fff; }
51%, to { background: #fff; color: #222; }
}
@-moz-keyframes blink {
from, 49% { background: #222; color: #fff; }
51%, to { background: #fff; color: #222; }
}
@-ms-keyframes blink {
from, 49% { background: #222; color: #fff; }
51%, to { background: #fff; color: #222; }
}
@-o-keyframes blink {
from, 49% { background: #222; color: #fff; }
51%, to { background: #fff; color: #222; }
}
@keyframes blink {
from, 49% { background: #bd362f; color: #fff; }
51%, to { background: #fff; color: #222; }
}
</style>
<title>Blinking cursor example</title>
</head>
<body>
<p>Text where last character is blinkin<span class="cursor">g</span></p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment