animation与transition的区别

1.animation

animation（动画） 属性
深入理解animation

属性	描述	可选值
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的时间。默认是 0。
animation-timing-function	规定动画的速度曲线。默认是 “ease”。	liner ：匀速 ease ：动画以低速开始，然后加快，在结束前变慢。 ease-in：动画以低速开始。 ease-out：动画以低速结束。 ease-in-out： 动画以低速开始和结束。 cubic-bezier：三次贝塞尔曲线 steps(int,start/end) 指定了时间函数中的间隔数量（步长）。有两个参数，第一个参数指定函数的间隔数，该参数是一个正整数（大于 0）。 第二个参数是可选的，表示动画是从时间段的开头连续还是末尾连续。含义分别如下：start：表示直接开始。end：默认值，表示戛然而止。
animation-delay	规定动画何时开始。默认是 0。	可以是负数，运用了负数之后，动画可以提前进行
animation-iteration-count	规定动画被播放的次数。默认是1。	1，infinite
animation-direction	规定动画是否在下一周期逆向地播放。默认是 “normal”，还有"alternate"逆播放。	normal ，alternate
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 默认值为none	forwards ：会保留动画结束时的状态，在有延迟的情况下，并不会立刻进行到动画的初始状态 backwards ：不会保留动画结束时的状态，在添加了动画延迟的前提下，如果动画有初始状态，那么会立刻进行到初始状态 both ：会保留动画的结束时状态，在有延迟的情况下也会立刻进入到动画的初始状态
animation-play-state	规定动画是否正在运行或暂停。默认是 “running”	running，paused

/*简写*/
animation: name duration timing-function delay iteration-count direction fill-mode play-state;

animation: light 2s linear 0s infinite alternate both;
@keyframes light{
   0% {
      opacity: 0;
   }
   50% {
      opacity: 0.6;
   }
   100% {
      opacity: 1;
   }
}

2.transition

vue的过渡效果
过渡属性 过渡所需要时间 过渡动画函数 过渡延迟时间；默认值分别为：all 0 ease 0

过渡动画函数
liner ：匀速
ease-in：减速
ease-out：加速
ease-in-out：先加速再减速
cubic-bezier：三次贝塞尔曲线

举例

div{
	width:100px;
	height:100px;
	background:red;
	transition:width 2s;
	-webkit-transition:width 2s; /* Safari */
}

div:hover{
	width:300px;
}

总结

1.animation需配合@keyframes，而transition不需要；
2.animation可以触发多次，transition只能触发一次；
3.animation可以设置多个帧，而transition只有两帧。