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. 后者更精细，每一帧都可控。前者是平滑过渡

转载于:https://www.cnblogs.com/douglasvegas/p/7299169.html