什么是 CSS 动画？

动画使元素逐渐从一种样式变为另一种样式,您可以随意更改任意数量的 CSS 属性。

animation属性

animation: animate 2s linear infinite;   //简写属性

animate：是animate-name属性的值，也是下文@keyframes 动画的名称；
2s：是animation-duration属性的值，动画在2s内完成，在@keyframes中"from" 和 "to"去改变途中样式；
linear：是animation-timing-function属性的值，规定从开始到结束的速度相同的动画；
infinite：是animation-iteration-count属性的值，表示画永远持续下去；

@keyframes

如果您在 @keyframes 规则中指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式,要使动画生效，必须将动画绑定到某个元素。

@keyframes animate {       //animate  也是上文定义的名称；
    0% {                           //可以是from-to,也可以是0%~100%
        transform: scale(1);        /* 1-0圈圈从大到小 */
    }
    100% {
        transform: scale(0);
    }
}

跑马灯

<style>
* {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
}
main {
        max-width: 100vw;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        background-color: #2c3a47;
        align-items: center;
        justify-content: center;
        animation: animate1 10s linear infinite;
}
@keyframes animate1 {
        from{
                filter: hue-rotate(0deg);
        }
        to{
                filter: hue-rotate(360deg);
        }
}
main #cube{
        position: relative;
        height: 120px;
        width: 120px;
}
main #cube span{
        position: absolute;
        width: 100%;
        height: 100%;
        transform: rotate(calc(18deg*var(--i)));
}
main #cube span::before {
        content: '';
        position: absolute;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color: aqua;
        box-shadow: 0 0 10px aqua ,0 0 20px aqua,0 0 40px aqua,0 0 80px aqua,0 0 100px aqua;
        animation: animate 2s linear infinite;
        animation-delay: calc(0.1s*var(--i));
}
@keyframes animate {
        0% {
                /* 1-0圈圈从大到小 */
                transform: scale(1);
                }
        100% {
                transform: scale(0);
                }
        }
main .loading{
        position: relative;
        top: 50px;
}
</style>
<body>
    <main>
        <div id="cube">
            <span style="--i:1;"></span>
            <span style="--i:2;"></span>
            <span style="--i:3;"></span>
            <span style="--i:4;"></span>
            <span style="--i:5;"></span>
            <span style="--i:6;"></span>
            <span style="--i:7;"></span>
            <span style="--i:8;"></span>
            <span style="--i:9;"></span>
            <span style="--i:10;"></span>
            <span style="--i:11;"></span>
            <span style="--i:12;"></span>
            <span style="--i:13;"></span>
            <span style="--i:14;"></span>
            <span style="--i:15;"></span>
            <span style="--i:16;"></span>
            <span style="--i:17;"></span>
            <span style="--i:18;"></span>
            <span style="--i:19;"></span>
            <span style="--i:20;"></span>
        </div>
        <div class="loading">
            <p>loading</p>
        </div>
    </main>
</body>

CSS3 animation(动画)及案例

什么是 CSS 动画？

animation属性

@keyframes

跑马灯