Link Search Menu Expand Document

CSS Animations CSS 动画

对照表

属性举例说明
animation-direction播放完后是反向运行还是重新播放
animation-iteration-countinfinite 无限循环 <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 将会被忽略。

相关库或框架

css3过渡动画

transition: linear 0.4s;