CSS @keyframes 规则-之路教程

语法

@keyframes animationname {keyframes-selector {css-styles;}}

关键帧选择器

关键帧声明块包括 CSS 属性及其值。
关键帧选择器可以以百分比 (%) 或者关键字“from”（与 0% 相同）和“to”（与 100% 相同）开头。
0% 是动画的起点，100% 是终点。

CSS @keyframes 规则

@keyframes at-rule 是关键帧动画的基础，用于为许多 CSS 属性设置动画（逐渐从一种样式更改为另一种样式）。

此规则允许通过沿动画序列定义关键帧（或者航路点）的样式来指定动画期间特定时刻应发生的事情。

@keyframes 是 CSS3 属性之一。

@keyframes 规则及其标识符后跟一个规则集（即带有选择器和声明块的样式规则，就像在普通 CSS 代码中一样）由花括号分隔。

动画序列中的关键帧

在花括号中，放置了关键帧选择器，它定义了应该更改样式时动画序列中的关键帧。
在动画序列期间，可以多次更改 CSS 样式集。

可接受的前缀

主流浏览器完全支持@keyframes 规则。
但是，对于某些前缀使用：

-webkit- 谷歌浏览器 4.0
-moz- Mozilla Firefox 5.0
-webkit- Safari 4.0
-webkit- Opera 15.0
-o- Opera 12.0

CSS @keyframes 规则属性值说明

值	描述
animationname	指定动画的名称。此值是必需的。
keyframes-selector	指定动画持续时间的百分比。值为：0-100％（与0％相同）（与100％相同）此值是必需的。
css-styles	CSS样式属性。此值是必需的。
initial	使属性使用其默认值。
inherit	从父母元素继承属性。

@keyframes 作为关键字

@keyframes 规则由一个关键字“@keyframes”和一个标识符（由开发人员选择）组成，该标识符定义了动画。
要将动画绑定到某个元素，此标识符称为 animation-name 属性的值。

这是它的样子：

/* define the animation */
@keyframes your-animation-name {
  /* style rules */
}
/* apply it to an element */
.element {
  animation-name: your-animation-name;
  /* OR using the animation shorthand property */
  animation: your-animation-name 1s …;
}

带有 background-color 属性的 @keyframes 规则示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .element {
        padding: 50px;
        animation: backgrounds 4s infinite;
      }
      @keyframes backgrounds {
        0% {
          background-color: #8ebf42
        }
        50% {
          background-color: #1c87c9;
        }
        100% {
          background-color: #cccccc;
        }
      }
    </style>
  </head>
  <body>
    <h2>@keyframes example</h2>
    <div class="element">The background of this text is animated.</div>
  </body>
</html>

在这个例子中，我们为 background-color 属性设置动画。
首先，我们为动画弹跳设置一个标识符。
然后我们将关键帧选择器设置为 0%、50% 和 100%，并为属性 green、blue 和 grey 定义值。
这意味着起点 (0%) 的背景颜色将是浅绿色，直到到达另一个关键帧 (50%)。
在动画序列的中间，背景将变为浅蓝色（从 50%-100%），在端点 (100%) 将变为灰色。

@keyframes 示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 10px;
        height: 100px;
        background: red;
        border-radius: 50%;
        position: relative;
        -webkit-animation: element 4s infinite;
        animation: element 4s infinite;
      }
      @-webkit-keyframes element {
        0% {
          top: 0px;
          background: #1c87c9;
          width: 100px;
        }
        100% {
          top: 200px;
          background: #8ebf42;
          width: 150px;
        }
      }
      @keyframes element {
        0% {
          top: 0px;
          background: #1c87c9;
          width: 100px;
        }
        100% {
          top: 200px;
          background: #8ebf42;
          width: 150px;
        }
      }
    </style>
  </head>
  <body>
    <h2>@keyframes rule example</h2>
    <div></div>
  </body>
</html>

使用@keyframes 制作下落图像的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html,
      body {
        height: 90%;
      }
      .container {
        margin: 30px auto;
        min-width: 320px;
        max-width: 600px;
        height: 90%;
        overflow: hidden;
      }
      img {
        -webkit-transform-oroirn: left center;
        -ms-transform-oroirn: left center;
        transform-oroirn: left center;
        -webkit-animation: fall 5s infinite;
        animation: fall 5s infinite;
      }
      @-webkit-keyframes fall {
        from {
          -webkit-transform: rotate(0) translateX(0);
          transform: rotate(0) translateX(0);
          opacity: 1;
        }
        to {
          -webkit-transform: rotate(90deg) translateX(200px);
          transform: rotate(90deg) translateX(200px);
          opacity: 0.1;
        }
      }
      @keyframes fall {
        from {
          -webkit-transform: rotate(0) translateX(0);
          transform: rotate(0) translateX(0);
          opacity: 1;
        }
        to {
          -webkit-transform: rotate(90deg) translateX(200px);
          transform: rotate(90deg) translateX(200px);
          opacity: 0.1;
        }
      }
    </style>
  </head>
  <body>
    <h2>@keyframes example</h2>
    <div class="container">
      <img src="/onitroad.png" alt="onitroad" width="150" height="50" />
    </div>
  </body>
</html>

日期：2020-06-02 22:14:36 来源：oir作者：oir

←CSS justify-items 属性

CSS :lang() 伪类→

语法