CSS - 动画

上一页
下一页

CSS 动画允许在不同样式之间创建平滑过渡，而无需使用 JavaScript。例如，

什么是 CSS 动画？

在 CSS 中，我们可以根据时间持续时间、用户交互或状态更改动态更改元素的样式，这称为 CSS 动画。它使用`@keyframes`规则来创建动画，并使用 animation 属性将其应用于元素。

目录


 

@keyframes 规则

`@keyframes`规则用于定义动画的关键帧，指定动画在各个阶段时动画元素的外观。请考虑以下定义关键帧规则的代码。

.box{
    animation: colorChange 5s infinite;
}

@keyframes colorChange {
    0% {
        background-color: red;
    }
    50% {
        background-color: green;
    }
    100% {
        background-color: blue;
    }
}

此代码将为具有类`.box`的元素定义动画，动画名称为 colorChange，运行 5 秒，并且无限次重复。

关键帧规则是为名为 colorChange 的动画定义的。

  • 在动画总持续时间的 0%（即 0 秒）时，背景颜色将为红色。
  • 在总时间的 50%（即 2.5 秒）时，背景颜色更改为绿色。
  • 在总持续时间的 100%（即 5 秒）时，颜色更改为蓝色。

动画延迟属性

我们可以使用animation-delay属性设置动画开始的延迟。查看以下示例

您还可以为 animation-delay 属性设置负值。如果您使用负值 -n，则动画将开始，就好像它已经播放了 n 秒一样。

示例

在此示例中，球将在 2 秒后开始向左移动。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .ball {
            width: 50px;
            height: 50px;
            background-color: #3498db;
            border-radius: 50%;
            position: absolute;
            left: 0; 

            animation-name: moveRight;
            /* Set duration */
            animation-duration: 2s;
            /* Set delay for animation */
            animation-delay: 2s; 
        }

        @keyframes moveRight {
            to {
                left: calc(100% - 50px);
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="ball"></div>
    </div>
</body>
</html>

设置动画迭代次数

我们可以使用animation-iteration-count属性设置动画重复的次数。

CSS 规范不支持此属性的负值。它可以取正整数（例如，1、2、3 等）或关键字“infinite”作为值。

示例

在此示例中，我们将球的迭代次数设置为无限。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .ball {
            width: 50px;
            height: 50px;
            background-color: #3498db;
            border-radius: 50%;
            position: absolute; 
            left: 0; 

            animation-name: moveRight;
            /* Set duration */
            animation-duration: 2s;
            /* Set number of time animation repeats */
            animation-iteration-count: infinite;
        }

        @keyframes moveRight {
            to {
                left: calc(100% - 50px);
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="ball"></div>
    </div>
</body>
</html>

动画方向属性

我们可以使用 animation-direction 属性指定动画运行的方向。

以下是 animation-direction 属性的有效值

  • normal: 动画按正常方式（向前）播放。这是默认值。
  • reverse: 动画按相反方向（向后）播放。
  • alternate: 动画首先向前播放，然后向后播放。
  • alternate-reverse: 动画首先向后播放，然后向前播放。

示例

在此示例中，我们使用内联 css 设置了 animation-direction 属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .ball {
            width: 50px;
            height: 50px;
            background-color: #3498db;
            border-radius: 50%;
            position: relative;
            left:0;
            
            animation-name: moveRight ;
            animation-duration: 2s;
            animation-iteration-count: infinite;
        }
        @keyframes moveRight {
            to {
                left: calc(100% - 50px);
            }
        }
    </style>
</head>

<body>
    <h2>animation-direction: normal</h2>
    <div class="ball" 
         style="animation-direction: normal; ">
    </div>

    <h2>animation-direction: reverse</h2>
    <div class="ball" 
         style="animation-direction: reverse;">
    </div>

    <h2>animation-direction: alternate</h2>
    <div class="ball" 
         style="animation-direction: alternate;">
    </div>

    <h2>animation-direction: alternate-reverse</h2>
    <div class="ball" 
         style="animation-direction: alternate-reverse;">
    </div>
</body>
</html>

动画时序函数

在 CSS 中，animation-timing-function属性用于定义动画的速度曲线。它可以取以下值。

  • ease: 动画将先缓慢开始，然后加快，最后缓慢结束（默认值）。
  • linear: 从头到尾速度相同的动画。
  • ease-in: 动画以缓慢开始。
  • ease-out: 动画以缓慢结束。
  • ease-in-out: 动画以缓慢开始和结束。
  • cubic-bezier(n,n,n,n): 这使我们能够为速度定义自己的值。要了解更多信息，请查看三次贝塞尔函数文章。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .ball {
            width: 50px;
            height: 50px;
            background-color: #3498db;
            border-radius: 50%;
            position: relative;
            left:0;
            
            animation-name: moveRight ;
            animation-duration: 2s;
            animation-iteration-count: infinite;
        }
        @keyframes moveRight {
            to {
                left: calc(100% - 50px);
            }
        }
    </style>
</head>

<body>
    <h2>linear</h2>
    <div class="ball" 
         style="animation-timing-function: linear;">
    </div>

    <h2>ease</h2>
    <div class="ball" 
         style="animation-timing-function: ease;">
    </div>

    <h2>ease-in</h2>
    <div class="ball" 
         style="animation-timing-function: ease-in;">
    </div>

    <h2>ease-out</h2>
    <div class="ball" 
         style="animation-timing-function: ease-out;">
    </div>
    
    <h2>ease-in-out</h2>
    <div class="ball" 
         style="animation-timing-function: ease-in-out;">
    </div>
    
    <h2>cubic-bezier(0.25, 0.1, 0.25, 1)</h2>
    <div class="ball" 
         style="animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);">
    </div>
</body>
</html>

设置动画填充模式

animation-fill-mode属性指定动画未播放时（开始前、结束后或两者）目标元素的样式。

animation-fill-mode 属性可以具有以下值

  • none: 动画在开始前或结束后不会应用任何样式。这是默认值。
  • forwards: 在动画结束时，元素将保留最后一个关键帧规则设置的样式。
  • backwards: 在动画结束时，元素将保留第一个关键帧规则设置的样式。
  • both: 动画将遵循 forwards 和 backwards 的规则。

查看以下代码的输出以了解更多信息

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .box {
            padding: 10px;
            background-color: green;
            color: white;
            font-size: 16px;
            margin: 20px;
            animation-duration: 2s;
            animation-name: changeColor;
        }

        /* Animation Definition */
        @keyframes changeColor {
            0% {
                background-color: blue;
            }
            100% {
                background-color: red ;
            }
        }

        /* Animation Fill Modes */
        .none {
            animation-fill-mode: none;
        }

        .forwards {
            animation-fill-mode: forwards;
        }

        .backwards {
            animation-fill-mode: backwards;
            animation-delay: 2s;
        }

        .both {
            animation-fill-mode: both;
            animation-delay: 2s;
        }
    </style>
</head>

<body>
    <div class="box none">None</div>
    <div class="box forwards">Forwards</div>
    <div class="box backwards">Backwards</div>
    <div class="box both">Both</div>
</body>
</html>

动画简写属性

在 CSS 中，animation属性是以下属性的简写

示例

<html lang="en">
<head>
    <style>
    .box {
        padding: 20px;
        background-color: #3498db;
        color: white;
        font-size: 16px;
        /* Name, duration, timing function, delay, repeat, direction, fill mode */
        animation: changeColor 2s ease-in-out 1s infinite alternate both;
    }

    /* Animation Definition */
    @keyframes changeColor {
        0% {
            background-color: #3498db;
        }
        100% {
            background-color: #e74c3c;
        }
    }

    </style>
</head>

<body>
    <div class="box">Animate Me!</div>
</body>
</html>

CSS 动画属性列表

以下是animation属性的子属性

属性 描述 示例
animation-composition 指示当多个动画对同一属性具有同时影响时要应用的复合操作。
animation-delay 指示动画是否应从动画的开头开始或在中途的某个位置开始，以及元素加载与动画序列开始之间应经过多长时间。
animation-direction 指示动画的初始迭代是向前还是向后，以及之后的迭代是否应继续沿相同方向或每次执行序列时都更改方向。
animation-duration 指示动画完成一个循环需要多长时间。
animation-fill-mode 描述动画应用于其目标的预运行和后运行样式。
animation-iteration-count 指示动画应重复多少次。
animation-name 它给出描述动画关键帧的 @keyframes at-rule 的名称。
animation-play-state 指示动画序列是否应播放或暂停。
animation-timing-function 描述用于指定动画中关键帧过渡的加速曲线。
打印页面
上一页
下一页
广告