CODEWITHSUNDEEP
csscss-animationskeyframe
Akash
Akash

Reputation: 295

css3 animation text repeatly

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?

Upvotes: 0

Views: 138

Answers (1)

Billy
Billy

Reputation: 1043

You can actually use infinite loop for your animation. Just that you need to time your animation at the keyframes instead of using delay.

See the fiddle

The CSS :

.animation_text{
    animation:animation1 9s infinite; 
}
.animation_text1 {
    animation:animation2 9s infinite; 
}
.animation_text2 {
    animation:animation3 9s infinite; 
}


@keyframes animation1 {
0%{opacity: 0; color:transparent;}
10% {opacity: 1; color:#fff;}
20%,100% {opacity: 0; color:transparent;}
}

@keyframes animation2 {
0%, 30%{opacity: 0; color:transparent;}
40% {opacity: 1; color:#fff;}
50%,100% {opacity: 0; color:transparent;}
}

@keyframes animation3 {
0%, 60%{opacity: 0; color:transparent;}
70% {opacity: 1; color:#fff;}
80%,100% {opacity: 0; color:transparent;}
}

Upvotes: 2

Related Questions