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

没有"speed"per-say值，但有"duration"one_answers"delay"。看起来你可以将-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个子延迟之间的比例保持不变，它就会相应地改变速度