我已经制作了一个带有以下动画的滑块。不幸的是,幻灯片之间的过渡时间太长了。我没有找到适当的属性来设置切换幻灯片之间的速度。
/* Keyframes */
@-webkit-keyframes animation_slides {
0%
{
opacity:0;
}
6%
{
opacity:1;
}
24%
{
opacity:1;
}
30%
{
opacity:0;
}
100%
{
opacity:0;
}
}
/* Animations on my ul li elements */
-webkit-animation-name: animation_slides;
-webkit-animation-duration: 30.0s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
&:nth-child(2)
{
-webkit-animation-delay: 6.0s;
-moz-animation-delay: 6.0s;
}
&:nth-child(3)
{
-webkit-animation-delay: 12.0s;
-moz-animation-delay: 12.0s;
}
&:nth-child(4)
{
-webkit-animation-delay: 18.0s;
-moz-animation-delay: 18.0s;
}
&:nth-child(5)
{
-webkit-animation-delay: 24.0s;
-moz-animation-delay: 24.0s;
}
能帮帮我吗?非常感谢你提前!
答案 0 :(得分:1)
每个值没有“速度”,但有“持续时间”和“延迟”。看起来您可以将-webkit-animation-duration: 30.0s;
的值更改为您想要的值,并相应地更改所有nth-child
-webkit-animation-delay
和-moz-animation-delay
相同的比例以影响'速度'转型
例如,这会使过渡时间缩短一半:
/* Animations on my ul li elements */
-webkit-animation-name: animation_slides;
-webkit-animation-duration: 15.0s; /* A value I changed */
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
&:nth-child(2)
{
-webkit-animation-delay: 3.0s; /* A value I changed */
-moz-animation-delay: 3.0s; /* A value I changed */
}
&:nth-child(3)
{
-webkit-animation-delay: 6.0s; /* A value I changed */
-moz-animation-delay: 6.0s; /* A value I changed */
}
&:nth-child(4)
{
-webkit-animation-delay: 9.0s; /* A value I changed */
-moz-animation-delay: 9.0s; /* A value I changed */
}
&:nth-child(5)
{
-webkit-animation-delay: 12.0s; /* A value I changed */
-moz-animation-delay: 12.0s; /* A value I changed */
}
只要总持续时间与第n个孩子延迟之间的比例保持不变,就会相应地改变速度