PROMULGATOR

    爷，@风靡全球%

    北京市
    Html
    Css
    Js

    
                        


                        

                            


 .box {
	width:150px;
	height:100px;
	background:green;
	border-radius:5px;
	text-align:center;
	color:white;
	line-height:100px;
	animation:run 5s 1s ease infinite;
}
@keyframes run {
	20% {
	transform:rotate(20deg);
}
50% {
	transform:translateX(1200px) rotate(0deg);
	background:green;
}
55% {
	transform:translateX(1200px) rotate(0deg);
	background:green;
}
90% {
	transform:translateX(0px) rotate(-360deg);
	background:blueviolet;
}
100% {
	transform:translateX(0px) rotate(-360deg);
	background:green;
}
}

                        

                        



                        

                   

                    
                   

                       
↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

                       
 
  立即下载    

                       

                   


                

                


                

                     
 
                         

                            
css3运动轨迹

                            

                                
	
                                      
                                                                      
                                    
                                    	
                                                                                                  	                             
                                    
                                                                       
                                

                            

                            

                        

                          

                             
                          

                         

                             
                             
animation：动画名称 动画执行时间 动画延迟时间 动画运动方式 动画执行次数
动画是否逆播 动画是否暂停执行 动画是否回到原来位置
animation-name设置动画名称
animation-duration 动画持续时间
animation-delay 动画延时时间-->
animation-timing-function 动画执行速度 linear（匀速）
运动方式：
linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始，然后加快，在结束前变慢。-->
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
执行次数
n：执行n次，infinite：无限次播放

                         

                     

                   
                


                
0