css动画属性

在css动画中，我们最常用的就是 transition 属性。当然除了transition 还有animation 、transform等。

1. transition ：允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。

transition ：transition-property || transition-duration || transition-timing-function || transition-delay;

• transition-property

transition-property: none || all || property;

none: 没有属性会获得过渡效果；

all: 所有属性都将获得过渡效果,也是其默认值；

property: 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

• transition-duration:

transition-duration: time;

transition-duration 指定元素的转化时间，默认值为0，变化是实时的。

• transition-timing-function：

transition-timing-function: linear || ease || ease-in || ease-out || ease-in-out || cubic-
bezier(n,n,n,n);

`

• transition-delay 动画延迟时间：

transition-delay：time

2、animation：
不同于transition只能定义首尾两个状态，animation 可以定义任意多的关键帧，实现复杂的动画效果。

animation: animation-name || animation-duration || animation-timing-function || animation-delay || animation-iteration-count || animation-direction

animation 主要包含6个属性，具体含义如下：

• animation-name 规定需要绑定到选择器的 keyframe 名称。。
• animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
• animation-timing-function 规定动画的速度曲线。
• animation-delay 规定在动画开始之前的延迟，默认值为0。
• animation-iteration-count 规定动画应该播放的次数，默认值为1。
• animation-direction 规定是否应该轮流反向播放动画，默认值是正向。

3、transform：
transform 变形的意思，主要包括 旋转rotate( deg )、扭曲skew。缩放scale和移动 translate 和矩阵变形
matrix。

transform: none || transform-functions

• translate：

值	描述
translate(x,y)	定义 2D 转换。
translate3d(x,y,z)	定义 3D 转换。
translatex(x)	定义转换,只是用x轴的值
translateY(y)	定义 转换，只用y轴的值
translateZ(z)	定义 3D 转换，只用Z轴的值

• scale

值	描述
scale(x,y)	定义 2D 缩放转换。
scale3d(x,y,z)	定义 3D缩放转换。
scaleX(x)	通过设置X轴的值定义缩放转换
translateY(y)	通过设置y轴的值来定义缩放转换
translateZ(z)	通过设置Z轴的值来定义3D缩放转换

• rotate

值	描述
rotate(angle)	定义 2D旋转，在参数中规定角度
rotate3d(x,y,angle)	定义 3D转换。
rotateX(angle)	定义沿着X轴旋转
rotateY(angle)	定义沿着Y轴的3D旋转
rotateZ(angle)	通过设置Z轴的值来定义3D旋转

• skew

值	描述
skew(x-angle,y-angle)	定义 沿着x和y轴的2D倾斜旋转
skewX(angle)	定义沿着X轴的2D转换
scaleY(angle)	定义沿着Y轴2D倾斜转换

4、transform-origin：
以上变化的默认参照点是元素的中心点，不过可以通过transform-origin设置元素的参照点。

transform-origin: X || Y || Z

其中X，Y，Z对应三维坐标，X，Y，Z的值可以是em，px。此外，X，Y可以是百分值，其中X也可以是字符参数值left，center，right。Y和X一样除了百分值外还可以设置字符值top，center，bottom。

最后还有 keyframe ：
使用animation前先了解 keyframe

@keyframes 让开发者通过指定动画中特定时间点必须展现的关键帧样式（或者说停留点）来控制CSS动画的中间环节。这让开发者能够控制动画中的更多细节而不是全部让浏览器自动处理。

要使用关键帧, 先创建一个带名称的@keyframes规则，以便后续使用 animation-name这个属性来调用指定的@keyframes. 每个@keyframes 规则包含多个关键帧，也就是一段样式块语句，每个关键帧有一个百分比值作为名称，代表在动画进行中，在哪个阶段触发这个帧所包含的样式。

关键帧的编写顺序没有要求，最后只会根据百分比按由小到大的顺序触发。

@keyframes animationname {keyframes-selector {css-styles;}}

值	描述
animationname	必需。定义动画的名称。
keyframes-selector	必需。动画时长的百分比。合法的值：0-100%from（与 0% 相同）to（与 100% 相同）
css-styles	必需。一个或多个合法的 CSS 样式属性。