Question

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

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

Answer 1

您可以将总体动画时间设置为9秒（动画= 4秒+暂停5秒），并相应地调整百分比步长，从而计算4秒相对于9秒的百分比（=约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>

Answer 2

您可以按照建议的方式进行操作，并添加更长的延迟，或者可以根据需要在百分比之间切换关键帧，以在迭代之间显示更大的间隙。

More here

.card {
  background: #00f;
  width: 100px;
  height: 100px;
  animation: rotate 5s infinite;
  -webkit-animation: rotate 5s infinite;
}

@-webkit-keyframes rotate {
  20%,100% {
    transform: rotate(90deg);
  }
}

@keyframes rotate {
   0%,25% {
    transform: rotate(90deg);
  }
  25%,50% {
    transform: rotate(-90deg);
  }
  50%,80% {
    transform: rotate(90deg);
  }
  80%,100% {
    transform: rotate(-90deg);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">A</div>

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

2 个答案: