CSS Typing animation using multiple spans - html

Question

Have so far got this
http://codepen.io/tacrossman/pen/GJglH
But what i want is for the cursor blinking animation to be running after each new word (span) is written out.
When I try and do something like
.type:after {
content:"_";
opacity: 0;
animation: cursor 1s infinite;
}
it doesn't have the desired effect. I am thinking that there is a conflict in the animation as i am technically running an animation within something that is already animating.
If you need anything else let me know, thanks a lot

Answer 1

Like this? Pretty sure this is what you were trying to achieve.
Updated Codepen result
span > span {
animation: cursor 1s infinite;
}
I also fixed a few glitches in the animation.. some were overlapping each other.

Answer 2

Are you using Safari or Chrome? I'm using Firefox and I noticed an issue is that you are inconsistent with your prefixes.
Here's new code without the webkit prefixes (add them back if you want, but considering it's not working for you, I'm assuming they're not necessary):
Working JSBIN: http://jsbin.com/ITokiXO/1/edit
.type{
position: absolute;
opacity: 0;
width: 12ch;
overflow: hidden;
animation: words 18s steps(12) infinite 0s;
}
.type:nth-child(2) {
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.type:nth-child(3) {
-webkit-animation-delay: 6s;
animation-delay: 6s;
}
.type:nth-child(4) {
-webkit-animation-delay: 9s;
animation-delay: 9s;
}
.type:nth-child(5) {
-webkit-animation-delay: 12s;
animation-delay: 12s;
}
.type:nth-child(6) {
-webkit-animation-delay: 15s;
animation-delay: 15s;
}
#keyframes words {
0% { opacity: 0; width:0; }
2% { opacity: 1;}
14% { opacity: 1; width: 12ch;}
15% { opacity: 0; }
}
.cursor:after {
content:" _";
opacity: 0;
animation: cursor 1s infinite;
}
#keyframes cursor {
0% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
}

Answer 3

here is a type effect but it uses steps in the animation function:
http://codepen.io/jonathan/pen/lwFzv
#-webkit-keyframes typing {
from { width: 0 }
to { width:14em }
}
#keyframes typing {
from { width: 0 }
to { width:14em }
}
#-webkit-keyframes caret {
from, to { border-color: transparent }
50% { border-color: black }
}
#keyframes caret {
from, to { border-color: transparent }
50% { border-color: black }
}
body { font-family: Consolas; }
h1 {
font-size:150%;
width:14em;
white-space:nowrap;
overflow:hidden;
border-right: .1em solid #333;
-webkit-animation: typing 13s steps(26, end),
caret 0.5s step-end infinite;
animation: typing 13s steps(26, end),
caret 0.5s step-end infinite;
}
you will notice the steps is set to 26 which is the number of characters in my H1
<h1>Typing Effect by Jonathan.</h1>
you could probably use the :after but it might require JS to calculate the word length for each word
also it best to always add the property without the vendor prefixes so it can used in browsers that support the animation property.. like in this case firefox does not need the vendor prefix
http://caniuse.com/#feat=css-animation