transition与animate动画区别

transition(过渡)

transition: property duration timing-function delay;

值	描述
transition-property	规定设置过渡效果的 CSS 属性的名称。
transition-duration	规定完成过渡效果需要多少秒或毫秒。
transition-timing-function	规定速度效果的速度曲线。
transition-delay	定义过渡效果何时开始。

animate

简写：animation: 1s 1s rainbow linear 3 forwards normal;

a:hover{
	animation-name: rainbow;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-delay: 1s;
	animation-fill-mode:forwards;
	animation-direction: normal;
	animation-iteration-count: 3;
}

@keyframes rainbow {
  0% { background: #c00 }
  50% { background: orange }
  100% { background: yellowgreen }
}

优缺点：

• transition没有中间状态，但多个transition可以连在一起，形成复杂效果
• transition监听基本属性，例如height、width、padding、margin等，其值在发生改变时就会对文档流产生影响
• 动画渲染包含 主线程渲染，合成线程（GPU）渲染，在transition不监听上面基本属性时，transition渲染的动画效果永远比animate线程使用更少，动画更流畅（不卡顿）
• 周期性运动，复杂动效使用animate

详细分析线程情况
timeline 分析动画