CSS3 animation，好玩的动画

animation：demoMove   A   B   C  D  E     （keyframe 名   执行时间   速率函数   延迟时间   运动方式   运动次数 ）

@keyframes demoMove{ 0%{ background-color:red;}

10%{ background-color:green;}

20%{ background-color:white;}

50%{ width:200px;}

100%{ height:200px;} }

 

animation 属性为css3的复合属性，主要包括以下子属性

animation-name:  此属性为执行动画的 keyframe 名

animation-duration:此属性为动画执行的时间 （可设置s 和ms）

animation-timing-function:指定过渡函数速率 （可以设置一下单词） 

1. linear:匀速
2. ease：慢，快，慢（开始 过渡 结束 三个阶段）
3. ease-in:慢速开始  快，慢
4. ease-out :慢  慢速过渡  慢
5. ease-in-out:慢，快   慢速结束
6. cubic-beier(n,n,n,n) (自定义函数)

对函数速率进行扩展

详细文章：https://blog.csdn.net/qq_256