Skip to content

Instantly share code, notes, and snippets.

@sathvikc

sathvikc/typing.css

Created September 2, 2015 16:41
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sathvikc/9d1d0b7eb442588e4e43 to your computer and use it in GitHub Desktop.
Save sathvikc/9d1d0b7eb442588e4e43 to your computer and use it in GitHub Desktop.
Download ZIP
Typing effect using CSS3
Raw
typing.css
<html>
<head>
<style type="text/css">
p{
color: #000;
font-family: "Segoe UI";
font-size: 20px;
white-space: nowrap;
overflow: hidden;
width: 100%;
animation: type 4s steps(80, end);
}
.cursor {
animation: blink 1s infinite;
}
@keyframes type{
from { width: 0; }
}
@keyframes blink{
to{opacity: .0;}
}
</style>
</head>
<body>
<p>hi Guys, This is typing animation using CSS3.<span class="cursor">|</span></p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment