←CSS animation-play-state 属性
CSS background-attachment属性→

动画相关属性

Animation 是用于在单个声明中设置所有动画属性的速记属性。
我们在下面列出了所有与动画相关的标准属性。

现在让我们看看动画相关的属性。

具有一些动画相关属性的动画示例：

@keyframes pulse {
  /* declare animation actions here */
}
.element {
  animation-name: pulse;
  animation-duration: 3.5s;
  animation-timing-function: ease-in;
  animation-delay: 1s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running;
}
/*
  The same can be declared using the animation shorthand property 
*/
.element {
  animation: pulse 3.5s ease-in 1s alternate infinite none running;
}

动画方向

它定义动画是否应该在交替循环中反向播放。
它的默认值在每个周期重置。

animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit

可以应用以下值：

  • normal —（默认）- 向前播放动画（关键帧 0% - 100%）
  • reverse — 向后播放动画（关键帧 (100% - 0%)）
  • alternate - 动画向前播放，然后反转并重复播放。
  • alternate-reverse — 动画向后播放，然后向前播放。

动画方向属性示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 120px;
        height: 120px;
        background: #ccc;
        position: relative;
        animation: myfirst 5s 1;
        animation-direction: normal;
      }
      @keyframes myfirst {
        0% {
          background: #8DC3CF;
          left: 0px;
          top: 0px;
        }
        25% {
          background: #1c87c9;
          left: 200px;
          top: 0px;
        }
        50% {
          background: #030E10;
          left: 200px;
          top: 200px;
        }
        75% {
          background: #666;
          left: 0px;
          top: 200px;
        }
        100% {
          background: #8ebf42;
          left: 0px;
          top: 0px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-direction example</h2>
    <p>Here the animation plays backwards.</p>
    <div></div>
  </body>
</html>

动画计时功能

该属性定义了动画在每个循环的持续时间内进展的方式——而不是贯穿整个动画。

animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) | initial | inherit

具有“ease”值的 animation-timing-function 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: #1c87c9;
        position: relative;
        -webkit-animation: element 5s infinite;
        /* Safari 4.0 - 8.0 */
        -webkit-animation-timing-function: ease;
        /* Safari 4.0 - 8.0 */
        animation: element 5s infinite;
        animation-timing-function: ease;
      }
      /* Safari 4.0 - 8.0 */
      @-webkit-keyframes element {
        from {
          left: 0px;
        }
        to {
          left: 200px;
        }
      }
      @keyframes element {
        from {
          left: 0px;
        }
        to {
          left: 200px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-timing-function example</h2>
    <div></div>
  </body>
</html>

动画持续时间

它定义了动画完成一个循环所需的时间长度（以秒或者毫秒为单位）。
如果未指定此属性，则不会发生动画。

animation-duration: time | initial | inherit

动画持续时间属性的示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .element {
        padding: 50px;
        animation: pulse 7s infinite;
      }
      @keyframes pulse {
        0% {
          background-color: #8ebf42;
        }
        50% {
          background-color: #1c87c9;
        }
        100% {
          background-color: #eee
        }
      }
    </style>
  </head>
  <body>
    <div class="element">Background of this text is animated using CSS3 animation property</div>
  </body>
</html>
CSS动画属性

动画属性用于动画（从一种样式逐渐变为另一种样式）具有离散值的 CSS 属性：布局属性（边框、高度、宽度等）、定义位置的属性（左、上）、字体大小、颜色和不透明度.

动画属性是 CSS3 属性之一。

为了理解动画属性，旧浏览器可能需要 -webkit-前缀。

属性使用关键字作为值，例如 display: none;visibility: hidden; 或者 height: auto; 不能是animated。

动画填充模式

此属性指定在执行动画之前或者之后应用的元素的样式。

animation-fill-mode: none | forwards | backwards | both | initial | inherit

它可以采用以下值：

  • forwards - 指定元素应保持由最后一个关键帧设置的样式值（取决于 animation-iteration-count 和 animation-direction 属性）。
  • 向后 - 指定元素应该获取由第一个关键帧设置的样式值（取决于动画方向）并将其保持在动画延迟时间内。
  • both - 指定动画应该遵循向前和向后的规则。
  • none -（默认）指定在执行动画之前或者之后不会对元素应用任何样式

带有“forwards”值的 animation-fill-mode 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #1c87c9;
        position: relative;
        -webkit-animation: element 5s;
        /* Safari 4.0 - 8.0 */
        -webkit-animation-fill-mode: forwards;
        /* Safari 4.0 - 8.0 */
        animation: element 5s;
        animation-fill-mode: forwards;
      }
      /* Safari 4.0 - 8.0 */
      @-webkit-keyframes element {
        from {
          top: 0px;
        }
        to {
          top: 200px;
          background-color: blue;
        }
      }
      @keyframes element {
        from {
          top: 0px;
        }
        to {
          top: 200px;
          background-color: #8ebf42;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-fill-mode example</h2>
    <div></div>
  </body>
</html>

动画播放状态

此属性指定动画是正在播放还是暂停。

animation-play-state: paused | running | initial | inherit

默认值正在运行。

带有“running”值的 animation-play-state 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 150px;
        height: 150px;
        background: #ccc;
        position: relative;
        animation: play 10s;
        animation-play-state: running;
      }
      @keyframes play {
        from {
          left: 0px;
        }
        to {
          left: 200px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-play-state example</h2>
    <p>Here the animation-play-state is set to "running".</p>
    <div></div>
  </body>
</html>

多个动画

可以在一个选择器上声明多个动画，我们只需要用逗号分隔值。

选择器上的多个动画示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
      body {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .element {
        height: 200px;
        width: 200px;
        background-color: #1c87c9;
        animation: pulse 5s ease infinite alternate, nudge 5s linear infinite alternate;
      }
      @keyframes pulse {
        0%,
        100% {
          background-color: #8ebf42;
        }
        50% {
          background-color: #1c87c9;
        }
      }
      @keyframes nudge {
        0%,
        100% {
          transform: translate(0, 0);
        }
        50% {
          transform: translate(150px, 0);
        }
        80% {
          transform: translate(-150px, 0);
        }
      }
    </style>
  </head>
  <body>
    <div class="element"></div>
  </body>
</html>

@keyframes 规则

要使用动画，我们必须首先指定在动画期间的特定时刻应该发生什么。
这是用@keyframes 规则定义的。

@keyframes 规则由关键字“@keyframes”后跟动画名称组成，用于标识动画。
然后通过将此标识符用作 animation-name 属性的值，将动画应用于元素。

在花括号中，我们放置了关键帧选择器，当样式应该改变时，它定义动画序列中的关键帧（或者航路点）。
关键帧选择器可以以百分比 (%) 或者关键字“from”（与 0% 相同）和“to”（与 100% 相同）开头。
0% 是动画的起点，100% 是终点。

使用@keyframe 规则的动画示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .element {
        padding: 50px;
        animation: pulse 4s infinite;
      }
      @keyframes pulse {
        0% {
          background-color: #8ebf42;
        }
        50% {
          background-color: #1c87c9;
        }
        100% {
          background-color: #d5dce8;
        }
      }
    </style>
  </head>
  <body>
    <div class="element">Background of this text is animated using CSS3 animation property.</div>
  </body>
</html>

在这个例子中，我们将动画绑定到 <div> 元素。

动画将持续 4 秒，它会逐渐将 <div> 元素的背景颜色从“绿色”变为“灰色”。

动画延迟

此属性设置正在加载的元素和动画开始之间的时间（以秒或者毫秒为单位）。

animation-delay: time | initial | inherit

动画延迟属性示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 120px;
        height: 120px;
        background: #1c87c9;
        position: relative;
        animation: delay 5s infinite;
        animation-delay: 3s;
      }
      @keyframes delay {
        from {
          left: 0px;
        }
        to {
          left: 300px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-delay example</h2>
    <p>Here the animation starts after 3 seconds.</p>
    <div></div>
  </body>
</html>

动画名称

此属性定义要应用的 @keyframes 规则的名称。

animation-name: keyframe-name | none | initial | inherit

动画名称属性示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        padding: 50px;
        animation: element 4s infinite;
      }
      @keyframes element {
        0% {
          background-color: #8ebf42;
        }
        50% {
          background-color: #1c87c9;
        }
        100% {
          background-color: #d5dce8;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-name example</h2>
    <div>The name of the animation is set as "element".</div>
  </body>
</html>

动画迭代计数

设置动画循环在停止前应播放的次数。
默认值为 1，但可以设置任何正整数值。
如果你设置了infinite关键字，动画会无限播放。

零或者负整数永远不会播放动画。

animation-iteration-count: number | infinite | initial | inherit

动画迭代计数属性的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
      }
      div {
        position: relative;
        width: 100px;
        height: 100px;
        margin: 30px 0;
        border-radius: 50%;
        animation-name: pulse;
      }
      .element-one {
        background-color: #1c87c9;
        animation-duration: 3s;
        animation-iteration-count: 3;
      }
      .element-two {
        margin: 0;
        background-color: #83bf42;
        animation-duration: 5s;
        animation-iteration-count: 2;
      }
      @keyframes pulse {
        0% {
          left: 0;
        }
        50% {
          left: 50%;
        }
        100% {
          left: 0;
        }
      }
    </style>
  </head>
  <body>
    <h2>The animation-iteration-count example</h2>
    <p>The animation-iteration-count sets the number of times an animation cycle should be played before stopping.</p>
    <div class="element-one"></div>
    <div class="element-two"></div>
  </body>
</html>
日期：2020-06-02 22:14:15 来源：oir作者：oir
←CSS animation-play-state 属性
CSS background-attachment属性→

目录

Copyright © 2017-2019 OnITRoad.com All rights reserved.  桂ICP备20001160号-1  关于 | 隐私和政策