CSS Animations CSS 动画

对照表

属性	值	举例	说明
animation-direction	–	–	播放完后是反向运行还是重新播放
animation-iteration-count	infinite 无限循环 <number> 数值支持整数和小数点，可以指定一个或多个以逗号分隔的值 2, 0, infinite	–	动画播放次数
animation-name	指定由@keyframes描述的关键帧名称	–	–
animation-play-state	–	–	允许暂停和恢复动画
animation-timing-function	–	–	设置动画速度
animation-delay	–	–	设置延时
animation-duration	–	–	动画周期时长
animation-fill-mode	–	–	指定动画执行前后如何为目标元素应用样式

@keyframes 写法

{}可写入css相关属性

@keyframes slidein {
  from {
    transform: translateX(0%); 
  }

  to {
    transform: translateX(100%);
  }
}

@keyframes identifier {
  0% { top: 0; left: 0; }
  30% { top: 50px; }
  68%, 72% { left: 50px; }
  100% { top: 100px; left: 100%; }
}

@keyframes identifier {
  0% { top: 0; }
  50% { top: 30px; left: 20px; }
  50% { top: 10px; }
  100% { top: 0; }
}

关键帧中的 !important 会被忽略

关键帧中出现的 !important 将会被忽略。

相关库或框架

• Animate.css

css3过渡动画

transition: linear 0.4s;