Moving two lines in opposite directions via CSS3 animations - css

Question

I have this code: https://jsfiddle.net/xuj0uu2k/4/
Markup
<div class="lline"></div>
<div class="projekt"><h1>SERVICES</h1></div>
<div class="rline"></div>
CSS
#keyframes anima {
from {width: 0%; }
to { width: 40%; }
}
.lline {
margin-top: 20px;
width: 40%;
background-color: #333;
animation-name: anima;
animation-duration:1s;
height: 2px;
float: left; }
.projekt {
text-align: center;
width: 14%;
margin: 0 auto; }
.rline {
margin-top: -38px;
width: 40%;
background-color: #333;
animation-name: anima;
animation-duration:1s;
height: 2px;
float: right; }
I need to animate the two lines from the text SERVICES to its borders.
I tried to set it up with animation-direction property, but it didn't work. The lines must be responsive, so I have to use some mediaqueries, but if you know better way to do it, I'll be glad. Thank you

Answer 1

You could do it with less markup using pseudoelements and display: flex, like in this example: http://codepen.io/fcalderan/pen/aObYLK
Markup
<h1 class="animateheading">SERVICES</h1>
Css
.animateheading {
width: 100%;
text-align: center;
overflow: hidden;
display: flex;
align-items: center;
}
/* lines */
.animateheading:before,
.animateheading:after {
content: "";
flex-grow: 1;
height: 1px;
min-width: 100px;
border-top: 1px #333 solid;
}
/* animation toward left */
.animateheading:before {
margin-right: .3em;
-webkit-animation: lineleft 3s linear 1s forwards;
-moz-animation: lineleft 3s linear 1s forwards;
animation: lineleft 3s linear 1s forwards;
}
/* animation toward right */
.animateheading:after {
margin-left: .3em;
-webkit-animation: lineright 3s linear 1s forwards;
-moz-animation: lineright 3s linear 1s forwards;
animation: lineright 3s linear 1s forwards;
}
/* keyframes for left animation */
#-webkit-keyframes lineleft {
from { -webkit-transform: translate(0, 0); }
to { -webkit-transform: translate(-100%, 0); }
}
#-moz-keyframes lineleft {
from { -moz-transform: translate(0, 0); }
to { -moz-transform: translate(-100%, 0); }
}
#keyframes lineleft {
from { transform: translate(0, 0); }
to { transform: translate(-100%, 0); }
}
/* keyframes for right animation */
#-webkit-keyframes lineright {
from { -webkit-transform: translate(0, 0); }
to { -webkit-transform: translate(100%, 0); }
}
#-moz-keyframes lineright {
from { -moz-transform: translate(0, 0); }
to { -moz-transform: translate(100%, 0); }
}
#keyframes lineright {
from { transform: translate(0, 0); }
to { transform: translate(100%, 0); }
}
Just some notes about this implementation
Flexbox position could require several different syntaxes, due to its implementation across browser: see http://caniuse.com/#feat=flexbox; since it is applied on pseudoelements only for styling purpose, a lack of support can be considered as graceful degradation;
This code works with text of any length and on every viewport size, since it animates the transform property using a percentage value. No matter how many rows will take the text, the lines will be always vertically centered;
Add as many vendor prefixes as you need for the keyframes;
The animation-fill-mode property is set to forwards so the last animation frame will be retained (and the lines don't come back).
If you need to always see two lines, even for really long texts, set a min-width on pseudoelements as I did in the example, otherwise you may safely remove it.