我希望廣場開始播放影片 5 秒，然后停止播放影片 3 秒，然后繼續。這只能使用CSS3嗎？
.box {
background-color: rebeccapurple;
border-radius: 10px;
width: 100px;
height: 100px;
animation-name: rotate;
animation-duration: 20s;
animation-play-state: running;
animation-iteration-count:infinite;
}
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}<div class="box"></div>uj5u.com熱心網友回復：
由于影片持續時間為 20 秒，因此在@kayframes中，25% = 5s => 5% = 1s => 15% = 3s（介于 25% - 40% 之間）
.box {
background-color: rebeccapurple;
border-radius: 10px;
width: 100px;
height: 100px;
animation: rotate 20s infinite;
}
@keyframes rotate {
0% {
transform: rotate(0);
}
25% {
transform: rotate(90deg);
}
40% {
transform: rotate(90deg);
}
100%{
transform: rotate(360deg);
}
}<div class="box"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/411139.html
標籤：