CSS animations insert word within an H1 - css

Question

Hi I have a situation where I need to show a word with a transition after some time inside a paragraph
for example i have an:
<h2>Click here to find <span class="more">more</span> information </h2>
I need the text more to appear with a sort of "fade" while the left and side text moves a bit to the sides kind of like this effect:
example
What i've tought (and was working) was using another span tag with class spacer right before the .more
<h2>Click here to find <span class="spacer"></span><span class="more">more</span> information </h2>
This is absolutely positioned and using a transition from width 0 to width 70px
and was looking fine in every browser except safari, because the spacer is always visible
here is my css code:
h2.sides-styled { left:0; margin: 0 auto; opacity:0; overflow: hidden; padding: 4px 0; position: absolute; right: 0; width: 774px; z-index: 1000; }
And the spans:
span.more { color:red; font-style: italic; left:365px; opacity:0; position: absolute; transition: visibility 2s; transition-delay: 3.3s; visibility: hidden; }
span.more.visible { opacity: 1; visibility: visible; }
span.spacer{ width:0; background: blue; -webkit-transition: width 2s ease; -moz-transition: width 0.3s ease; -o-transition: width 0.3s ease; -ms-transition: width 0.3s; transition: width 0.3s; transition-delay: 3.1s; -webkit-transition-delay: 3.1s; -moz-transition-delay: 3.1s; -o-transition-delay: 3.1s; -ms-transition-delay: 3.1s; }
Animation is triggered adding the class .visible in Javascript
I need to achieve this using only css

Answer 1

You can achieve the effect using CSS3 transitions:
function toggleVisible() {
var heading = document.getElementsByTagName('h2')[0];
heading.classList.toggle('visible');
}
var button = document.getElementsByTagName('button')[0];
button.addEventListener('click', toggleVisible, false);
h2 {
font-size: 36px;
text-align: center;
}
h2 span {
display: inline-block;
}
h2 span:nth-of-type(1) {
transform: translateX(42px);
transition: transform 2s ease-in-out;
}
h2 span:nth-of-type(2) {
opacity: 0;
transition: opacity 2s ease-in-out 1s;
}
h2 span:nth-of-type(3) {
transform: translateX(-42px);
transition: transform 2s ease-in-out;
}
h2.visible span:nth-of-type(1) {
transform: translateX(0);
}
h2.visible span:nth-of-type(2) {
opacity: 1;
}
h2.visible span:nth-of-type(3) {
transform: translateX(0);
}
<h2><span>Click here to find</span> <span>more</span> <span>information</span></h2>
<button type="button">Toggle visible</button>

Answer 2

You need to use keyframes for that. I've made a quick test: http://jsbin.com/pubicabiku/1 . You'll need to adjust duration and position, but you can get the gist.
More info about keyframes: http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp
Update:
For smooth animation, you can use percentages. from and to represent 0 and 100:
/* sleft */
#-webkit-keyframes sleft {
0% {left: 50px; }
60% {left: 0px;}
100% {left: 50px;} // initial state
}
To repeat animation X times:
animation-iterantion-count: X;
-webkit-animation-iterantion-count: X;
Edit: I posted the code, just in case:
CSS
#swap {
position:absolute;
color:chocolate;
-webkit-animation: swap 2s infinite;
animation: swap 2s infinite;
}
/* swap */
#-webkit-keyframes swap {
from {left: 150px; opacity:0;}
to {left: 190px; opacity:1;}
}
#keyframes swap {
from {left: 150px; opacity:0;}
to {left: 190px; opacity:1;}
}
#sleft {
position:absolute;
-webkit-animation: sleft 2.5s infinite;
animation: sleft 2.5s infinite;
}
/* sleft */
#-webkit-keyframes sleft {
from {left: 50px; }
to {left: 0px;}
}
#keyframes sleft {
from {left: 50px;}
to {left: 0px;}
}
#sright {
position:absolute;
-webkit-animation: sright 3s infinite;
animation: sright 3s infinite;
}
/* sright */
#-webkit-keyframes sright {
from {left: 200px; }
to {left: 270px;}
}
#keyframes sright {
from {left: 200px; }
to {left: 270px;}
}
HTML
<p id="sentence">
<span id="sleft">We provide</span>
<span id="swap">code</span>
<span id="sright">for your business.</span>
</p>