时间戳

首页 > 解决方案 > 每次旋转之间暂停动画五秒钟

html - 每次旋转之间暂停动画五秒钟

问题描述

我正在做这个演示。如何在每次旋转之间为该动画添加 5 秒延迟？

.card {
    background: #00f;
    width: 100px;
    height: 100px;
    animation: rotate 4s infinite;
    -webkit-animation: rotate 4s infinite;
}

@-webkit-keyframes rotate {
    100% {
        transform: rotate(90deg);
    }
}
@keyframes rotate {
    50% {
        transform: rotate(-90deg);
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">A</div>

标签： htmlcsscss-animations

解决方案

您可以将整体动画时间设置为 9 秒（= 动画 4 秒 + 暂停 5 秒）并相应调整百分比步长，计算 4 秒相对于 9 秒的百分比（= app. 44%）

.card {
    background: #00f;
    width: 100px;
    height: 100px;
    animation: rotate 9s infinite;
}

@keyframes rotate {
    22% {
        transform: rotate(90deg);
    }
    44% {
        transform: rotate(0deg);
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">A</div>

补充：第二个版本，停顿在前后旋转之间：

.card {
    background: #00f;
    width: 100px;
    height: 100px;
    animation: rotate 9s infinite;
}

@keyframes rotate {
    22% {
        transform: rotate(90deg);
    }
    78% {
        transform: rotate(90deg);
    }
    100% {
        transform: rotate(0deg);
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">A</div>

另一个补充：第三个版本，所有旋转之间都有暂停：

（只需根据需要调整百分比值和动画时间）

.card {
    background: #00f;
    width: 100px;
    height: 100px;
    animation: rotate 20s infinite;
}

@keyframes rotate {
    25% {
        transform: rotate(90deg);
    }
    50% {
        transform: rotate(90deg);
    }
    75% {
        transform: rotate(0deg);
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">A</div>

推荐阅读