CSS3动画：动画之间的转换速度太慢

Question

我已经构建了一个带有以下动画的滑块。不幸的是，幻灯片之间的转换时间过长。我还没有找到合适的属性来设置切换幻灯片之间的速度。

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

你能帮帮我吗？非常感谢您提前！

Answer 1

每个说的价值没有'速度'，但有'持续时间'和'延迟'。它看起来像你的-webkit-animation-duration: 30.0s;值更改为任何你想和相应地改变所有nth-child-webkit-animation-delay S和-moz-animation-delay S中的相同比例影响的过渡

的“速度”例如，这将使过渡一半长：

/* 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个孩子延迟之间的比例保持不变，它将改变速度相应