CSS 动画

Posted omehtin

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS 动画相关的知识,希望对你有一定的参考价值。

CSS 可实现 html 元素的动画效果,而不使用 javascript 或 Flash!

CSS动画您将可能使用到以下属性:

  • @keyframes
  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
  • animation

@keyframes 规则:如果您在 @keyframes 规则中指定了 CSS 样式,动画将在特定时间逐渐从当前样式更改为新样式。

注意animation-duration 属性定义需要多长时间才能完成动画。如果未指定 animation-duration 属性,则动画不会发生,因为默认值是 0s(0秒)。

animation-delay 属性规定动画开始的延迟时间。

animation-iteration-count 属性指定动画应运行的次数。使用值 "infinite" 使动画永远持续下去。

以上是关于CSS 动画的主要内容,如果未能解决你的问题,请参考以下文章

CSS如何实现动画?

CSS3动画(animation)——且听风吟720

多彩的网页CSS动画详解

多彩的网页CSS动画详解

多彩的网页CSS动画详解

JQuery - 动态 CSS 动画更改仅在我离开浏览器窗口并返回时发生