延长动画持续时间 - 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>