0

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

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

你能帮我么？非常感谢您！

4

1 回答 1

1

每个说值没有“速度”，但有“持续时间”和“延迟”。看起来您可以将值更改为-webkit-animation-duration: 30.0s;您想要的任何值，并相应地更改所有nth-child -webkit-animation-delays 和-moz-animation-delays 相同的比例以影响过渡的“速度”

例如，这将使转换时间减半：

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

于 2013-07-30T18:13:45.657 回答