CSS3 Pushing the Limits - Getting Animated

Posted on   |   In

Animation和 transition不同， animation可以定义每一帧，transition就是start和end两帧

百分比来定义帧

@keyframes my-first-animation {
0% {
/* Styles */
}
25% {
/* Styles */
}
50% {
/* Styles */
}
75% {
/* Styles */
}
100% {
/* Styles */
}
}

使用: 必须项 name + duration

div {
animation-name: my-first-animation;
animation-duration: 5s;
}
  • animation-timing-function
  • animation-delay
  • 不同的 animation-iteration-count 循环次数 数字 / infinite
  • 不同的 animation-direction 方向
    • reverse 100% - 0%
    • alternate 往返的，如果次数大于1
    • normal - 默认正常
    • alternate-reverse — 先反向在回来
  • 不同的 animation-play-state
    • running
    • paused
  • 不同的 animation-fill-mode
    • none 开始或结束时 元素保持他自己的style
    • forwards 结束时保持 最后一帧的style 不一定是 0% 可能是 100%
    • backwards 如果用了delay， 在没开始前，就应用 第一帧的style
    • both forwads和backwards同时