一、元素动效
1. 过渡 - transition
过渡为一个元素在不同状态之间切换不同的过渡效果，由过渡属性的名称、过渡需要的时间、过渡的方式、过渡的延迟时间四部分组成。注意过渡必须是在元素状态切换下进行，需要用到伪类。
（1）过渡属性的名称 - transition-property 过渡样式
div { transition-property: background-color; }
值需要直接写需要过渡的属性名称，当过渡多个样式的时候可以写 all。
（2）过渡需要的时间 - transition-duration
div { transition-duration: 0.5s; }
（3）过渡的方式 - transition-timing-function，CSS中封装了5种方式：
div { transition-timing-function: linear; }
（4）过渡的延迟时间 - transition-delay
延迟时间指在过渡效果开始作用之前需要等待的时间，以s或ms为单位，取值为正会延迟一段时间来响应过渡效果；取值为负会导致过渡立即开始。
div { transition-delay: 1s; }
（5）简化写法，格式：transition：过渡时间 延迟时间 过渡方式 过渡样式（延迟时间必须写在过渡时间以后，其他可以调换位置；最简写法为 transition:过渡时间）。
div { transition: 1s 1s ease background-color; }
（6）多重样式过渡，使用 transition 进行多个不同的过渡样式时，每一个不同时间的过渡样式用逗号分隔。
div { transition: 1s border-radius, 1s 1s opacity; }
2. 变化
（1）translate( ) 位移函数
使用margin负值方法的元素居中必须知道子元素的宽高，而位移函数不用：
.zi { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
（2）rotate( ) 旋转函数，该函数默认为 Z 轴旋转，deg 单位为旋转角度，角度可以为正值或负值，旋转的中心点是元素最中心的点。
div { transform: rotateZ(360deg); }
（3）scale( ) 缩放函数，缩放函数中的参数是以倍数为基础的，1代表当前大小，
也可以写两个值，如果写一个表示x轴和y轴用同一个值。
div { transform: scale(-1, -1); }
（4）skew( ) 倾斜扭曲函数，在 2d 变换中倾斜，可以有 X 轴和 Y 轴的倾斜角度，默认为 X 轴倾斜。
skewX x轴扭曲，正值水平左侧扭曲，负值右侧扭曲
skewY y轴扭曲，正值左侧向上，负值右侧向上
div { transform: skewX(-40deg); transform: skewY(50deg); }
（5）基点 - transform-origin
改变元素变化时的原点，默认情况下，元素的中心原点位于 x 轴和 y 轴的 50% 处。
3. 动画
（1）关键帧 - @keyframes
css中的@规则，通过在动画序列中定义关键帧的样式，来控制CSS动画序列中的步骤，以百分比来规定改变发生的时间，或者通过关键词"from"和"to"，等价于0%和100%。创建关键帧方法如下：
@keyframes move { 0% {transform: translate(0);} 100% {transform: translate(600px);} } /* 0%为开始时间 */ /* 100%为结束时间 */ /* move为帧名 */
（2）动画名称 - animation-name，指定动画要使用哪一个关键帧。
（3）结束时间 - animation-duration，代表一个动画周期的时长，默认值0秒，调用动画时必须写：动画名称、持续时间。
（4）运动方式 - animation-timing-function
div { animation-timing-function: steps(8,end); }
（5）延迟时间 - animation-delay，与过渡延迟时间同用。
（6）结束状态 - animation-fill-mode，设置动画结束时盒子的状态，在动画运行到某个位置的时候，动画停止，元素默认会迅速回到起始位置。
（7）执行顺序 - animation-direction
（8）循环次数 - animation-iteration-count，其值通常为整数，默认为1，值infinite表示无限循环。
（9）简写方式
格式：animation: 执行时间 延迟时间 关键帧名称 运动方式 运动次数 结束状态;
最简：最简方式 animation: 动画执行时间 执行关键帧名称;（ 注意执行时间和延迟时间顺序不可调整）
（10）动画停止 - animation-play-state，单独写，不可加入简写之中。
/*鼠标移入ul时，暂停动画*/ .xz-roll ul:hover { animation-play-state: paused; }
css 样式将对布局、字体、颜色、背景和其它文图效果实现更加精确的控制。只通过修改一个文件就改变页数不计的网页的外观和格式。 在所有浏览器和平台之间的兼容性。更少的编码、更少的页数和更快的下载速度。除了还不能全面支持我们常用的大多数浏览器之外，CSS 在实现其它承诺方面作得相当出色。CSS 在改变我们制作样式表的方法。它为大部分的网页创新奠定了基石。
