css3 动画文字重复

Question

我是css3动画初学者。我想连续旋转文本。我试过了，这是我的 fiddle 位置。

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;}
}

动画效果很好。但文字不会连续旋转。我知道要添加 "infinite" 属性。如果我添加这个属性，它会破坏我的动画。我该如何解决这个问题？

Answer 1

您实际上可以为动画使用 infinite 循环。只是您需要在关键帧处为动画计时，而不是使用延迟。

See the fiddle

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;}
}

css3 动画文字重复

css3 animation text repeatly

css

keyframe

css-animations