transition与animation的区别

transition与animation区别

1.transition需要触发条件，不能自动执行
2.transition触发一次，只能执行一次，多次执行，需要多次触发条件
3.transition只能设置开始和结束两个状态，不能设置中间的状态

//语法
.example {
  transition-property: all | none | <custom-ident>;
  transition-duration: 0s;
  transition-timing-function: ease | ease-in | ease-out | ease-in-out |
    cubic-bezier(<number>, <number>, <number>, <number>);
  transition-delay: 0s;
}
//简写
.example {
  transition: [transition-property] [transition-duration]
    [transition-timing-function] [transition-delay];
}
//多个过渡效果
.example {
  transition: width 2s linear, opacity 2s linear, color 2s linear;
}

4.animation像flash动画一样，可以设置动画关键帧
5.animation不需要触发条件，页面加载完成后自动执行，transition需要触发条件

.example {
 animation: dropdown 8s linear infinite;
}
@keyframes dropdown {
    0% { margin-top: 0px;}
   /** 暂停效果 */
   10% { margin-top: 0px;}
   50% { margin-top: -100px;}
   60% { margin-top: -100px;}
   90% { margin-top: -200px;}
  100% { margin-top: -200px;}
}