I am beginner of css3 animation. I want to rotate the text continuously. I tried, this is my fiddle location.
https://jsfiddle.net/v3jds98d/
span { font-size:30px; position:absolute; top:40%; text-align:center; width:100%; left:0; color: transparent; opacity:0;
-webkit-animation: textanimation 3s ;
-moz-animation: textanimation 3s ;
-ms-animation: textanimation 3s ;
animation: textanimation 3s ;
}
.animation_text1 { -webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
}
.animation_text2 { -webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
@keyframes textanimation {
0%{opacity: 0; color:transparent;}
50% {opacity: 1; color:#fff;}
100% {opacity: 0; color:transparent;}
}
@-webkit-keyframes textanimation {
0%{opacity: 0; color:transparent;}
50% {opacity: 1; color:#fff;}
100% {opacity: 0; color:transparent;}
}
Animation is working good. But the text not rotate continuously. I know to add "infinite" property. If I add this property, it ruined my animation. How can I fix this?
