CSS3 Keyframes介绍

最新推荐文章于 2025-01-22 03:00:00 发布

qq_39412143

最新推荐文章于 2025-01-22 03:00:00 发布

阅读量219

点赞数 1

分类专栏：编程

编程专栏收录该内容

72 篇文章

订阅专栏

本文详细解析了CSS3中@keyframes规则的使用方法，包括如何定义动画名称、设置不同时间段的样式规则，以及使用关键词from和to替代0%和100%。同时，还介绍了在不同浏览器上的前缀支持情况，并通过一个具体案例展示了如何创建复杂的动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。

@keyframes changecolor{
  0%{
   background: red;
  }
  100%{
    background: green;
  }
}

在一个“@keyframes”中的样式规则可以由多个百分比构成的，如在“0%”到“100%”之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，从而达到一种在不断变化的效果。

经验与技巧：在@keyframes中定义动画名称时，其中0%和100%还可以使用关键词from和to来代表，其中0%对应的是from，100%对应的是to。

浏览器的支持情况：

Chrome 和 Safari 需要前缀 -webkit-；Foxfire 需要前缀 -moz-。

案例演示

通过“@keyframes”声明一个名叫“wobble”的动画，从“0%”开始到“100%”结束，同时还经历了一个“40%”和“60%”两个过程。“wobble”动画在“0%”时元素定位到left为100px，背景色为green，然后在“40%”时元素过渡到left为150px,背景色为orange,接着在“60%”时元素过渡到left为75px，背景色为blue，最后“100%”时结束动画，元素又回到起点left为100px处，背景色变为red。