CSS Animation 动画

CSS 动画

animation 较複杂、客製化的动画@keyframe使用必须考虑某些属性的支援度

animation-* 语法

animation: (name) (duration) (timing-func) (delay)(iteration-count) (direction)

-name 绑订 @keyframe 动画名称-duration 完成动画总耗时 (default:0，必须自设定不可省略)-timing-function 速度曲线-delay 动画开始前的延迟-iteration-count 动画重複次数-direction: alternate 是否轮流反向播放 (好用!!)

  .animated-shake {    // name , duration , iteration-count    animation: shake 5s infinite;    animation-delay: 2s;    animation-direction: alternate; // 是否反向播放  }

animation-fill-mode

理解animation-fill-mode属性设定当动画「开始之前」或「结束之后」的状态预设 none 一律返回原始状态forwards 会停留在最后的位置backwards 会停留在动画开始的位置(同none)both 同时套用 forwards & backwards

  // animate.css 使用此  .animated {    animation-fill-mode: both;  }

animation-play-state

动画播放或暂停状态

  .house {    animation-play-state: running;    &:hover {      animation-play-state: paused;    }  }

animation-timing-function

linear 速度相等ease 默认 低速始->加快->加速前放慢ease-in 缓慢开始ease-out 缓慢结束ease-in-out 缓慢开始 & 结束cubic-bezier(n,n,n,n)

@keyframe

from 表起始 亦可用 0% 表示to 表结束 亦可用 100% 表示开头结尾可省略，程式会自动演算 (但有写较佳)

  .box {    position:absolute;    top: 0;    left: 0;    animation: move 2s 1;  }  @keyframes move{    // 0% { top: 0; left: 0; } // 可省略    20% { left: 50px; }    80% { top: 50px; }    100% { right: 0; }  }

JS 监听 Animation Events

animationstart： 当动画开始时触发animationend： 当动画结束时触发animationiteration：当动画重複时触发animationcancel： 当动画中止(支援度差)

CSSKeyframesRule

可用于动画不中断、修改动画样式原文範例待补....

参考资料

MDN、w3school完整解析CSS动画