CSS过渡属性、动画属性详解

1. transition过渡效果属性

过渡：可以实现元素在变换过程中的过渡效果
过渡效果可在鼠标悬停（：hover）、鼠标单击（：active）、表单获得焦点（：foucus）等伪类或者对元素改变以及在结合js来呈现。

1.1 transition属性的分解写法

1. transition-property 指定过渡的属性

可以用来指定需要过渡的那个属性（如width、height等），默认值是all，所有的属性都会过渡。
如： transition-property: width,height,background-color;

2. transition-duration 过渡的持续时间

过渡持续时间，通常用秒s 或者 毫秒ms作单位。默认值0，所以这一项是必须的，否则跟瞬间变化没有区别。
如：transition-duration: 5s;

3. transition-timing-function 过渡的运行曲线

定义过渡的速度曲线。默认值ease。其他属性值如下：

• linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
• ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
• ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
• ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
• ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
• 贝赛尔曲线在线生成器
  cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值，上述几个值都可以通过贝塞尔曲线在线生成器自定义制作，然后复制数据即可。

4. transition-delay 过渡延迟时间

过渡延迟多久后开始执行。通常用秒s 或者 毫秒ms作单位。默认值0。

1.2 transition属性的复合写法

一般规范遵循顺序：

过渡: 需要过渡的属性 持续时间 速度运行曲线 延迟时间;
如：transition: all 5s linear 10s;

1.3 多个属性,分开设置

如果针对不同属性需要有不同的过渡设置，可以使用逗号分隔开
如：transition: width 5s, height 10s,background-color 15s;

1.4 注意

并不是所有属性都能产生动画效果，比如display（display：none隐藏）、z-index（定位层级）等都是不支持动画和过渡效果的，因为他们都是一瞬间的时间。只有确却的数值到数值的变化，或者颜色到颜色的变化，才能拥有动画效果。

2. animation 动画效果属性

画是指由许多帧静止的画面，以一定的速度（如每秒16张）连续播放时
肉眼因视觉残象产生错觉，而误以为画面活动的作品。transition过渡属性与animation动画属性可以帮助我们自动的生成动画关键帧。

2.1 @keyframes: 定义动画关键帧

格式：定义动画关键帧 然后绑定相应动画名
如：@keyframes 对应的动画名 { }

1. 动画帧写法第一种 常用
   0~100 可以自己 自定义插帧，如：
   第一帧：0%{ background-color: pink; }
0~100中间的帧数 可以按照自己的需求来进行补帧数：50%{ background-color: red; }
最后一帧：100%{ background-color: blue; }

2. 动画帧写法第二种
   只有开始帧和结束帧，中间不能自定设置其他帧数。如：
   开始帧：from{background-position-x: 0px;}
结束帧：to{background-position-x: -1600px;}

3. 注意：元素的 初始状态 和 动画的第一帧 并不一定是一样的。

2.2 animation 动画属性分解 常用的

1. 动画名属性: animation-name (定义动画名，是给动画帧进行绑定的)

2. 动画持续时间: animation-duration (通常用秒s 或者 毫秒ms作单位。默认值0。)

3. 动画播放次数: animation-iteration-count(默认值 1 ，无限循环则设置值为 infinite )

4. 反向播放: animation-direction: alternate;（规定动画是否反向播放，默认值normal。如果需要反向播放则设置值为 alternate 。）

当设置了反向播放时，动画的播放次数必须大于 1，才能生效。因为第一次播放是不会反向的，第二次播放才会反向，所以动画播放次数起码是2次，才能看到反向效果。

5. 动画延迟时间: animation-delay （延迟多久后开始执行，通常用秒s 或者 毫秒ms作单位。默认值0。）

6. 动画运行速度曲线: animation-timing-function（同上面1.1过渡的运行曲线属性值用法一样）

7. 动画播放状态: animation-play-state（ running默认值：动画运行；paused：动画暂停。通常是配合伪类和js来进行控制动画的播放状态）

2.3 复合写法规范的顺序: （不常用）

动画名 动画时间 速度曲线 延迟时间 播放次数 方向播放;
animation: name duration timing-function delay iteration-count direction;

2.4 补充：steps()

截取图片为几份，来进行插帧
如：animation: wk 1s steps(8) infinite;

总结

上述是小编为大家整理的过渡属性和动画属性，对他们的分解写法和复合写法都进行了讲解。参考多方资料加上自己的理解整理出来的，或有不确之处和疏漏的地方，还望各位大佬能够不吝赐教，加以斧正，小编在此先行谢过了。