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個孩子延遲之間的比例保持不變，它將改變速度相應