过渡与动画都可以产生动画效果，但是开发者只能控制过渡的开始状态与结束状态，其中间状态由浏览器隐式控制，与之相比，开发者可以控制动画的中间状态。使用CSS和JS均能实现动画效果。
1-CSS过渡与动画
1）变换
变换：是平移（translate）、旋转（rotate）、缩放（scale）、歪斜（skew）等操作的总称，在CSS中变换由属性transform控制，上述属性可以组合使用进行复合操作；复合操作时，操作函数从优向左相乘进行，
每个页面视口（viewport）是一个坐标系统，称为视口坐标系统，视口的左上角是原点（0，0），x轴向右增加，y轴向下增加；坐标系统如下：
元素应用变化后，会创建一个局部坐标系统，原点默认为元素的中心点（50% * width，50% * height）；如下图：
局部坐标系统
可以通过设置transform-origin改变局部坐标系统的原点 ;
变换不会影响页面上其他元素的布局，不会导致重排 ；
2）过渡
CSS过渡由简写属性transition控制，它由下列几个长属性组成：
-
transition-property：指定哪些属性发生动画；多个属性使用逗号分隔； -
transition-duration：指定动画持续时间；默认0，表示不发生动画； -
transition-delay：指定动画开始时间，即性开始变化时与过渡开始发生时之间的时长；默认0，表示指定属性变化后立即发生动画； -
transition-timing-function：指定过渡的动画过程中会产生中间值的计算函数，即动画如何发生；
元素通过过渡产生动画效果只需要三步：
- 设置元素的开始状态；
- 在开始状态里添加
transition属性，指定发生动画的属性与动画持续时间；其余两个属性可选； - 定义元素的结束状态；
3）动画
CSS过渡由简写属性animation控制，它由下列几个长属性组成：
-
animation-name：指定动画名称用于配置动画外观； -
transition-duration：指定动画的周期时长； -
transition-timing-function：指定一个周期内动画过程； -
transition-delay：指定动画开始时间；默认0，表示立即发生动画； -
animation-iteration-count：指定动画的重复次数；默认1； -
animation-direction：指定动画启动时keyframe的播放方向；默认向前播放； -
animation-fill-mode：指定动画未播放时（已完成或由于设置延迟还未开始）的样式；none：动画执行前后，元素不会应用动画中的任何样式；forwards：在动画结束，元素将应用动画结束时属性值；backwards：动画从开始到延迟时间结束，元素将应用动画的第一帧的属性值；both：动画从开始到延迟时间结束，元素将应用动画的第一帧的属性值；结束时应用动画结束时属性值； -
animation-play-state：paused，停止当前动画；running：从停止处启动动画；
元素通过过渡产生动画效果只需要二步：
1、使用@keyframe的定义名称为animation-name的帧列表样式；
2、在元素里添加animation属性；
