同一动画的几个计时功能

Question

我可以为同一个动画添加几个计时功能..

div{  
width:100px;  
height:100px;  
background:red;  
position:relative;  
animation:mymove 3s;  
animation-iteration-count:2;  
animation-timing-function: ease;}  

@keyframes mymove{ 
0% {top:0px;}  
25% {top:100px;}  
100% {top:200px;}}    

我希望缓解从0％到25％，缓解从25％到100％

Answer 1

您可以使用animation-timing-function: cubic-bezier(n,n,n,n);

定义唯一值

此网站可帮助您自定义它：http://cubic-bezier.com/

Answer 2

它需要在你的动画旁边：

@keyframes mymove{ 
0% {top:0px;}  
25% {top:200px;}  
100% {top:0px;}
} 

这是寻找什么？ 要么

@keyframes mymove{ 
0% {top:0px;} 
6.25% {top:100px;}
25% {top:200px;}  
100% {top:200px;}
} 

你可以使用步骤贝塞尔曲线：https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function 或者玩它：

http://cubic-bezier.com

http://www.jasondavies.com/animated-bezier/