延長動畫持續時間 - CSS3

Question

我有以下動畫。我想要做的是當動畫到達50%我希望它在那裏呆8秒。

如果我將animation-duration: 3s;更改爲8s，它會非常緩慢。

而transition-duration: 0.5s;似乎沒有任何效果。

我也試過把animation-duration: 5s;加到50% {}，但那也沒有做任何事。

---

有關如何完成此任務的任何建議？

html body div#size_cont div#dirt_specs { 

     -webkit-animation-name: dirt-specs1-anim; 
     -moz-animation-name: dirt-specs1-anim; 
     -o-animation-name: dirt-specs1-anim; 
     animation-name: dirt-specs1-anim; 

     -webkit-animation-timing-function: ease-in-out; 
     -moz-animation-timing-function: ease-in-out; 
     -o-animation-timing-function: ease-in-out; 
     animation-timing-function: ease-in-out; 

     -webkit-animation-iteration-count: infinite; 
     -moz-animation-iteration-count: infinite; 
     -o-animation-iteration-count: infinite; 
     animation-iteration-count: infinite; 

     -webkit-transition-duration: 0.5s; 
     -moz-transition-duration: 0.5s; 
     -o-transition-duration: 0.5s; 
     transition-duration: 0.5s; 

     -webkit-animation-duration: 3s; 
     -moz-animation-duration: 3s; 
     -o-animation-duration: 3s; 
     animation-duration: 3s; 


     transform: scale(1.4,1.4); 
     opacity: 0; 
    } 

    @-webkit-keyframes dirt-specs1-anim {  
     50% { 
      transform: scale(1.2,1.2); 
      opacity: 0.5; 
     } 
     100% { 
      opacity: 0; 
     } 
    } 
    @-moz-keyframes dirt-specs1-anim {   
     50% { 
      transform: scale(1.2,1.2); 
      opacity: 0.5; 
     } 
     100% { 
      opacity: 0; 
     } 
    } 
    @-o-keyframes dirt-specs1-anim {    
     50% { 
      transform: scale(1.2,1.2); 
      opacity: 0.5; 
     } 
     100% { 
      opacity: 0; 
     } 
    } 
    @keyframes dirt-specs1-anim {  
     50% { 
      transform: scale(1.2,1.2); 
      opacity: 0.5; 
     } 
     100% { 
      opacity: 0; 
     } 
    } 

Answer 1

這是你需要在你的動畫幀做什麼：

@keyframes dirt-specs1-anim { 
    13.6% { 
    transform: scale(1.2, 1.2); 
    opacity: 0.5; 
    } 
    86.4% { 
    transform: scale(1.2, 1.2); 
    opacity: 0.5; 
    } 
    100% { 
    opacity: 0; 
    } 
} 

，簡單地設置您的animation-duration到11s。

說明：

• 由於原來的動畫爲3秒長，並且您的要求是包括在中間8-第二延遲，整個動畫變得11秒。

• 這意味着1.5s進入第一個過渡，8s進入冷凍段，並1.5s進入結束過渡。

• 雖這麼說，你需要獲得在該1.5s就是這樣做出來的11s的%，其中1.5/11 = 0.136，因此13.6%。

• 86.4%從反向計算，1 - 1.5/11 = 0.864，這是因爲您希望保持此動畫狀態（即凍結片段），直到動畫的最後1.5s。

請參閱以下工作示例：

div { 
 
    height: 150px; 
 
    width: 150px; 
 
    background: red; 
 
    
 
    -webkit-animation-name: dirt-specs1-anim; 
 
    -moz-animation-name: dirt-specs1-anim; 
 
    -o-animation-name: dirt-specs1-anim; 
 
    animation-name: dirt-specs1-anim; 
 
    
 
    -webkit-animation-timing-function: ease-in-out; 
 
    -moz-animation-timing-function: ease-in-out; 
 
    -o-animation-timing-function: ease-in-out; 
 
    animation-timing-function: ease-in-out; 
 
    
 
    -webkit-animation-iteration-count: infinite; 
 
    -moz-animation-iteration-count: infinite; 
 
    -o-animation-iteration-count: infinite; 
 
    animation-iteration-count: infinite; 
 
    
 
    -webkit-animation-duration: 11s; 
 
    -moz-animation-duration: 11s; 
 
    -o-animation-duration: 11s; 
 
    animation-duration: 11s; 
 

 
    transform: scale(1.4, 1.4); 
 
    opacity: 0; 
 
} 
 

 
@-webkit-keyframes dirt-specs1-anim { 
 
    13.6% { 
 
    transform: scale(1.2, 1.2); 
 
    opacity: 0.5; 
 
    } 
 
    86.4% { 
 
    transform: scale(1.2, 1.2); 
 
    opacity: 0.5; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    } 
 
} 
 

 
@-moz-keyframes dirt-specs1-anim { 
 
    13.6% { 
 
    transform: scale(1.2, 1.2); 
 
    opacity: 0.5; 
 
    } 
 
    86.4% { 
 
    transform: scale(1.2, 1.2); 
 
    opacity: 0.5; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    } 
 
} 
 

 
@-o-keyframes dirt-specs1-anim { 
 
    13.6% { 
 
    transform: scale(1.2, 1.2); 
 
    opacity: 0.5; 
 
    } 
 
    86.4% { 
 
    transform: scale(1.2, 1.2); 
 
    opacity: 0.5; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    } 
 
} 
 

 
@keyframes dirt-specs1-anim { 
 
    13.6% { 
 
    transform: scale(1.2, 1.2); 
 
    opacity: 0.5; 
 
    } 
 
    86.4% { 
 
    transform: scale(1.2, 1.2); 
 
    opacity: 0.5; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    } 
 
}

<div></div>