transition(动画属性)

CSS过渡（transition）是经过定义元素从起点的状态到终点的状态，在必定的时间区间内实现元素平滑过渡或变化的一种补间动画机制。
transition的四个子属性：

- transition-property
- transition-duration
- transition-timing-function 
- transition-delay

即经过transition你能够决定哪一个属性（property），什么时候开始（delay），持续多久（duration）以及如何动画（timing-function）

transition的简写：

例如

1. transition: background-color 3s linear 1s;
2. transition: width 2s ease-in 2000ms, border 2s linear, height 5s
3. transition: 4s ease-in-out

• 以transition-property的值列表长度为标准，若是某个属性值列表长度短于它，则重复值让长度一致
• 如某个属性值列表长于transition-property将被截短。

如何执行动画效果

css3动画通常经过鼠标事件或者鼠标状态定义动画，一般咱们能够使用css中伪类、使用js修改元素的样式属性或追加删除样式来执行定义的动画。CSS中伪类执行动画：

动态伪类	起做用的元素	描述
:link	只有连接	未访问的连接
:visited	只有连接	访问过的连接
:hover	全部元素	鼠标通过元素
:active	全部元素	鼠标点击元素
:focus	全部可被选中的元素	元素被选中

transitionend事件

transitionend事件会在css transition过渡完成时触发。当transition完成前被移除或者取消。好比移除css的transition-property属性，此事件将不被触发。

Chrome	Firefox (Gecko)	IE	Opera	Safari (Webkit)
1.0开始 webkitTransitionEnd	4.0开始 transitionend	10开始 transitionend	10.5开始 oTransitionEnd 12开始 otransitionend 12.10开始 transitionend	3.2开始 webkitTransitionEnd

transition和animation的区别
1. transition完成后会保留过渡后的状态，而animation会跳至默认状态
2. 后者更精细，每一帧均可控。前者是平滑过渡