CSS loading动画（animation-direction案例）-CFANZ编程社区

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS loading动画（animation-direction案例）</title>
    <style>
        body {
            margin: 0;
            padding: 50px;
        }
        * {
            box-sizing: border-box;
        }

        .loading {
            display: inline-flex; align-items: end;
            background-color: #eee;
            border: 1px solid #ddd;
            padding: 16px;

        }
        .loading .txt {
            font-size: 16px;
            width: 30px; height: 30px;
            text-align: center; line-height: 30px;
            background-color: #ddd;
            border-radius: 50%;
        }
        .loading .txt+div{
            margin-left: 8px;
        }
        .circle {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #7daeff;
            animation: ani 6s ease-in infinite alternate;
            /*
            animation-direction 定义是否轮流反向播放动画
                值：
                    normal 默认值正常播放
                    reverse 反向播放
                    alternate 从正常方向开始的轮流反向播放
                    alternate-reverse 从反方向开始的轮流反向播放
            */
        }
        @keyframes ani {
            0% {

            }
            5% {
                transform: translateY(-30px);
            }
            10% {
                transform: translateY(-30px) translateX(38px);
            }
            15% {
                transform: translateY(-30px) translateX(38px) translateY(38px);
            }
            20% {
                transform: translateY(-30px) translateX(76px) translateY(38px);
            }
            25% {
                transform: translateY(-30px) translateX(76px) ;
            }
            30% {
                transform: translateY(-30px) translateX(114px) ;
            }
            35% {
                transform: translateY(-30px) translateX(114px) translateY(38px);
            }
            40% {
                transform: translateY(-30px) translateX(152px) translateY(38px);
            }
            45% {
                transform: translateY(-30px) translateX(152px);
            }
            50% {
                transform: translateY(-30px) translateX(190px);
            }
            55% {
                transform: translateY(-30px) translateX(190px) translateY(38px);
            }
            60% {
                transform: translateY(-30px) translateX(228px) translateY(38px);
            }
            67% {
                transform: translateY(-30px) translateX(228px);
            }
            77% {
                transform: translateY(-30px) translateX(266px);
            }
            87% {
                transform: translateY(-30px) translateX(266px) translateY(38px);
            }
            95% {
                transform: translateY(-30px) translateX(304px) translateY(38px);
            }
            100% {
                transform: translateY(-30px) translateX(304px);
            }
        }
    </style>
</head>
<body>
<div style="text-align: center">
    <div class="loading">
        <div class="circle"></div>
        <div class="txt">加</div>
        <div class="txt">载</div>
        <div class="txt">中</div>
        <div class="txt">，</div>
        <div class="txt">请</div>
        <div class="txt">稍</div>
        <div class="txt">后</div>
        <div class="txt">！</div>
    </div>
</div>

<script>

</script>
</body>
</html>