|
body {font-family: Helvetica; background: #efefef;} |
|
h1 {font-size: 100px; color: #333;} |
|
|
|
/* you start with transparent type and faux cursor */ |
|
/* each character has typing animation for .5s */ |
|
/* fill mode makes the text keep the color it gets in animation */ |
|
.char1, .char2, .char3 { |
|
color: transparent; |
|
border-right: .1em solid transparent; |
|
-webkit-animation: typing .5s; |
|
-webkit-animation-fill-mode: forwards; |
|
-moz-animation: typing .5s; |
|
-moz-animation-fill-mode: forwards; |
|
} |
|
|
|
.char1 {-webkit-animation-delay: .5s;} |
|
.char2 {-webkit-animation-delay: 1s;} |
|
/* give your last character some padding and the blink animation */ |
|
.char3 { |
|
padding-right: 2px; |
|
-webkit-animation: typing 1s; |
|
-webkit-animation: blink 1s infinite; |
|
-webkit-animation-delay: 1.5s; |
|
-moz-animation: typing 1s infinite; |
|
-moz-animation: blink 1s infinite; |
|
-moz-animation-delay: 1.5s; |
|
} |
|
|
|
/* typing animation */ |
|
@-webkit-keyframes typing { |
|
from, to {color: #333; border-color: transparent; } |
|
70% {color: #333; border-color: #07D6FF; } |
|
} |
|
@-moz-keyframes typing { |
|
from, to {color: #333; border-color: transparent; } |
|
70% {color: #333; border-color: #07D6FF; } |
|
} |
|
|
|
/* the blinking faux cursor at the end */ |
|
@-webkit-keyframes blink { |
|
from, to {color: #333; border-color: transparent;} |
|
50% {border-color: #07D6FF;} |
|
} |
|
@-moz-keyframes blink { |
|
from, to {border-color: transparent;} |
|
50% {border-color: #07D6FF;} |
|
} |
