CSS3动画

animation动画简介

　　通过类似Flash动画的关键帧来声明一个动画，在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效

　　一、transform（转换动画、直接动画）

　　rotate（旋转）包含三种状态，x、y、z三轴的变化，

　　rotatex、rotatey、rotatez（默认）

　　rotate旋转案例

　　

 

 

 　　效果图

　　　　　　　　

　　

 

　　 2 .translate（平移）

　　　 包含三种状态，x、y、z三轴的变化

　　　 translatex（默认）、translatey、translatez

　　　 translate（平移）案例

　　　 

 

 　　   效果图

　　　 

 

 　　　3.skew（变形）

　　　 包含两种状态，x和y的变化，

　　　 skewx（默认）、skewy

　　     skew（变形）案例

　　　  

 

 　　　效果图

　　　　　　

 

 　　　4.scale（伸缩比例）

　　　    scale两个参数时，分别是宽度和高度的比例

　　　　scale一个参数时，是等比例缩放

　　　　scale（伸缩比例）案例

　　　　

 

 　　　　效果图

　　　　　　　　

 

 　　　二，transition（过渡动画）

　　　　　1.transition相关补充

　　　          transition-property过渡的属性
　　　　　  transition-delay延迟时间
　　　　　  transition-duration动画过渡时间
　　　　　  transition-timing-function过渡效果的时间曲线：linear（匀速）、ease（慢-快-慢）、ease-in（开始慢）、ease-out（结束慢）、ease-in-out（开始、结束慢）

　　　　　transition（过渡动画）案例

　　　　　

 

 　　　　　效果图