46. CSS3 Keyframes介绍

作者： 文章来源：

本文原地址：https://www.mimiwuqi.com/webqianduan/196562.html

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

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

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

经验与技巧：

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

浏览器的支持情况：

更多 建站教程 请访问 https://www.mimiwuqi.com/webqianduan/