animation 和 transition 的区别

Transition 提供了从一种状态过渡到另一种状态的改变。

Animation 则可以从不同关键帧（@keyframes）上设置多个过渡点。

Transition

• 关注的是元素指定css属性的变化
• 只有开始和结束两个状态
• 动效的出发主要由hover或js触发，无法加载时触发
• 动画是一次性的，除非再次去触发

 

常用属性  
/** 指定过渡元素的属性 all监听所有属性的变化 */
transition-property: width;  
/** 动画的耗时 */
transition-duration: .8s;
/** 动画过渡方式 */
transition-timing-function: ease;
/** 延时执行 */
transition-delay: .5s;

Animation

• 重点在于动画的流程和控制
• @keyframes关键帧能精细化处理过渡过程的每一个动画效果，每个过程可以看做是一次transition的过程
• 类似播放器效果的动画属性能控制动画的播放、暂停、播放时长、播放顺序和循环次数等，能完成更丰富的动画效果
• 在页面加载时会触发

常用属性：
animation-name：keyframes中定义的动画名称；

animation-duration：动画执行一次持续的时长；

animation-timing-function：动画速率变化函数；

animation-delay：动画延迟执行的时间；

animation-iteration-count：动画执行的次数，可以是数字，或者关键字（infinate）;

animation-direction：alternate(奇数次超前运行，偶数次后退运行)。

animation-fill-mode：告诉浏览器将元素的格式保持为动画结束时候的样子。