Question

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

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

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动画文本重复

1 个答案: