css3动画文本重复答案

【问题标题】：css3 animation text repeatlycss3动画文本重复
【发布时间】：2015-06-16 14:42:29
【问题描述】：

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

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

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

【问题讨论】：

标签： css css-animations keyframe

【解决方案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;}
}

【讨论】：