每次旋转之间暂停动画五秒钟 [英] Pause animation between each rotation for five seconds

问题描述

我正在制作这个演示.如何在每次旋转之间将此动画添加五秒钟的延迟?

I am working on this demo. How can I add five seconds delay to this animation between each rotate?

.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>

推荐答案

您可以将整体动画时间设置为9秒(动画为4秒，暂停为5秒)，并据此调整百分比步长，计算百分比4秒(相对于9秒)(=约占44％)

You can set the overall animation time to 9 seconds (= 4 seconds for animation + 5 seconds for pause) and adjust the percentage steps accordingly, calculating the percentage of 4 seconds in relation to 9 seconds (= 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>

添加:第二个版本，其中暂停位于向前和向后旋转之间 :

Addition: Second version, where the pause is between the forward and backward rotation:

.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>

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

Another addition: Third version, with pauses between all rotations:

(根据需要调整百分比值和动画时间)

(just adjust the percentage values and animation time as desired)

.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>

这篇关于每次旋转之间暂停动画五秒钟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！