第十四章：过渡属性和动画属性

1. transition过渡效果属性1.1 transition属性的分解写法1.2 transition属性的复合写法1.3 多个属性,分开设置1.4 注意2. animation 动画效果属性2.1 @keyframes: 定义动画关键帧2.2 animation 动画属性分解 常用的2.3 复合写法规范的顺序: （不常用）2.4 补充：steps()总结

1. transition过渡效果属性

过渡：可以实现元素在变换过程中的过渡效果

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

1.1 transition属性的分解写法

transition-property 指定过渡的属性

可以用来指定需要过渡的那个属性（如width、height等），默认值是all，所有的属性都会过渡。

如：transition-property: width,height,background-color;

transition-duration 过渡的持续时间

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

如：transition-duration: 5s;

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 之间的数值，上述几个值都可以通过贝塞尔曲线在线生成器自定义制作，然后复制数据即可。

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 对应的动画名 { }

动画帧写法第一种 常用

0~100 可以自己 自定义插帧，如：

第一帧：0%{ background-color: pink; }

0~100中间的帧数 可以按照自己的需求来进行补帧数：50%{ background-color: red; }

最后一帧：100%{ background-color: blue; }

动画帧写法第二种

只有开始帧和结束帧，中间不能自定设置其他帧数。如：

开始帧：from{background-position-x: 0px;}

结束帧：to{background-position-x: -1600px;}

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

2.2 animation 动画属性分解 常用的

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

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

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

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

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

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

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

动画播放状态: 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;

总结

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