几个定时功能适用于同一动画

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);

定义一个Uniqe值

此站点可以帮助您自定义：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/