HTML5权威指南——过渡，动画和变换

使用过渡

• 过渡效果一般指的是浏览器直接改变CSS属性实现的，使用transition的一系列属性就可以控制应用新属性的速度
• 过渡属性如下

属性	说明
transition-delay	指定过渡开始之前的延迟时间
transition-duration	指定过渡的持续时间
transition-property	指定过渡应用的属性
transition-timing-function	指定过渡期间计算中间值的方式
transition	以上过渡声明都可简写于此

时间的单位是s和ms
1.创建反向过渡

• 反向过渡是什么呢？我觉的可以这样理解，在元素应用了：hover选择器，当鼠标悬停在元素上时有该样式，但当鼠标移出的演示的回归就是硬生生回到原本的状态，所以一般过渡成对出现，即暂时状态的过渡和方向相反的反向过渡
• 创建反向过渡的方法很简单就是在元素的原本的CSS属性下设置过渡属性

使用动画

所谓的动画就是功能更强大的过渡吧

• 动画分为两个部分创建，一个是在样式表中定义以上的相关属性，一个是使用@key-frames规则创建。
  1.使用关键帧

• 设置初始状态使用from子句指向另一组初始值，即from…to…

• 指定中间关键帧使用百分数子句实现，同样也可以使用0%和100%代替from和to子句
  2.设置重复方向

• 使用animation-direction属性动画以何种方式重复

• 当值为normal时每次动画都恢复初始状态从头播放

• 当值为alternate时动画先向前播放然后再反向播放
  3.理解结束状态

• 所谓的结束状态就是指动画结束，动画状态就会结束
  4.初始布局应用动画

• 这个标题的意思就是将动画绑定在一个静态的元素上，比如说为一个P元素绑定动画
  5.重用关键帧

• 将一组关键帧应用于多个动画上，多个动画的属性不完全相同，由此产生不同的动画效果
  6.为多个元素应用多个动画

• 这个就是将多个选择器应用同一个动画
  （书上的内容这样写着实啰嗦）
  7.停止和启动动画

• 使用animation-play-state属性，当值为pause动画停止，当值为playing动画就会开始播放

使用变换

• 使用CSS来进行线性变换，缩放旋转等操作

• 使用transform来进行变换，这里面的值可以对元素进行水平竖直方向上的变换，也可以进行旋转。

• 使用transform-origin来指定变换的起点，定位的方式通过组合top,bottom,left,right,center,来进行x轴y轴的定位，不指定位置默认实在中心

• 将变换也可以作为动画的一部分