我想在滑块上从上到下为文本设置动画。这是我用来动画的css:
HTML:
<p class="rg5 slideInDown" id="text-animation">mobile</p>
的CSS:
.rg5 {
font-family: roboto sans-serif;;
font-size: 52px;
color: #ffffff;
margin-bottom: 10%;
line-height: 1;
text-transform: uppercase;
transition: 1s ease-in-out;
animation: slidein 5s infinite;
-webkit-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
-webkit-animation: slidein 5s infinite;
-moz-animation: slidein 5s infinite;
-o-animation: slidein 5s infinite;
animation-fill-mode: forwards;
}
.slidein {
-moz-animation-duration: 5s;
-webkit-animation-duration: 5s;
animation-duration: 5s;
-moz-animation-name: slidein;
-webkit-animation-name: slidein;
animation-name: slidein;
-moz-animation-iteration-count: 3;
-webkit-animation-iteration-count: 3;
animation-iteration-count: 3;
-moz-animation-direction: alternate;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}
@-moz-keyframes slidein {
from {
-moz-transform: translate(1,-30em) scale(1.2);
}
to {
-moz-transform: translate(1em,1) scale(1.2);
}
}
@-webkit-keyframes slidein {
from { -webkit-transform: translate(0s,-20em) scale(1.2);
}
to { -webkit-transform: translate(0em,0) scale(1.2);
}
}
@keyframes slidein {
from {
transform: translate(0,-20em) scale(1.2);
}
to {
transform: translate(0em,0) scale(1.2);
}
}
它在从上到下滑动时工作得很好,但动画之间应该有15秒的时间间隔。
答案 0 :(得分:1)
这可以使用纯css来完成,不建议使用setInterval
。
您可以使用animation-iteration-count: infinite;
&amp; animation-delay: 15s;
了解后续动画之间的时间差距。
参考代码:
.rg5 {
font-family: roboto sans-serif;
font-size: 52px;
color: black;
margin-bottom: 10%;
line-height: 1;
text-transform: uppercase;
transition: 1s ease-in-out;
animation: slidein 5s infinite;
-webkit-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
-webkit-animation: slidein 5s infinite;
-moz-animation: slidein 5s infinite;
-o-animation: slidein 5s infinite;
animation-fill-mode: forwards;
}
.slidein {
-webkit-animation-delay: 15s; /* Safari 4.0 - 8.0 */
-moz-animation-delay: 15s;
animation-delay: 15s;
}
@-moz-keyframes slidein {
from {
-moz-transform: translate(1, -30em) scale(1.2);
}
to {
-moz-transform: translate(1em, 1) scale(1.2);
}
}
@-webkit-keyframes slidein {
from {
-webkit-transform: translate(0s, -20em) scale(1.2);
}
to {
-webkit-transform: translate(0em, 0) scale(1.2);
}
}
@keyframes slidein {
from {
transform: translate(0, -20em) scale(1.2);
}
to {
transform: translate(0em, 0) scale(1.2);
}
}
&#13;
<p class="rg5 slideInDown" id="text-animation">mobile</p>
&#13;
答案 1 :(得分:-1)
您可以使用setInterval函数保持15秒的时间间隔。
setInterval(function()
{
your_function();
}, 15000);