css3动画效果属性

1、transition： 平衡过渡

transition简写属性，transition{transition-property，transition-duration，transition-timing-function，transition-delay}

transition-property

属性值	含义
all	所有
none	没有属性
property	定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

transition-duration

time	这个效果执行多长时间

transition-timing-function指定效果的转速曲线

属性值	含义
linear	匀速
ease	先快后慢再慢
ease-in	以慢速开始
ease-out	以慢速结束
ease-in-out	以慢速开始和结束
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

transition-delay延迟多少秒执行效果

animation： 动画

一般通过@keyframes 规则，创建动画。 在动画过程中，您能够多次改变这套 CSS 样式。以百分比来规定改变发生的时间，或者通过关键词 “from” 和 “to”，等价于 0% 和 100%。0% 是动画的开始时间，100% 动画的结束时间。

animation-name	指定要绑定到选择器的关键帧的名称
animation-duration	动画指定需要多少秒或毫秒完成
animation-timing-function	设置动画将如何完成一个周期
animation-delay	设置动画在启动前的延迟间隔
animation-iteration-count	定义动画的播放次数
animation-direction	指定是否应该轮流反向播放动画
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式
animation-play-state	指定动画是否正在运行或已暂停

transform： 改变元素的大小、位置

translate:移动
translate(x,y) 定义 2D 转换。
translate3d(x,y,z) 定义 3D 转换。
translateX(x)
translateY(y)
translateZ(z)
rotate：旋转
旋转的时候，可以给旋转的模块设置一个原点
transform-origin: x , y;
scale：放缩

skew：扭曲（倾斜）

matrix:矩阵，一般用来变换前面四种没有的效果，也可以实现前面四种效果