CSS動畫重複無需重新加載

Question

我創建了一個帶有背景圖片的div，並將css動畫應用到它（從左到右過渡）。 （附截圖）enter image description here我的問題是：如何在無需重新加載頁面的情況下再次播放它？這裏是我的html：

<div class="cityscape"> 
    <div class="chef"></div> 
</div> 

這裏是我的CSS：

.chef { 
    background-image: url("../img/chef.png"); 
    background-position: left bottom; 
    background-size: auto 100%; 
    position: absolute; 
    background-repeat: no-repeat; 
    width:700px; 
    height:60px; 
    margin-top:90px; 
} 

/動畫廚師/

@-webkit-keyframes move 
    { 
     from { 
     left: 0; 
    } 

    to { 
     left: 50%; 
    } 
} 

@keyframes move 
{ 
    from { 
     left: 0; 
    } 
     to { 
     left: 50%; 
    } 

     to { 
     left: 100%; 
    } 

} 


.chef { 
    padding-right: 20px; 
    left: 100%; 
    position: absolute; 
    -webkit-animation: move 40s; 
    animation: move 40s; 
} 

.chef img { 
    -webkit-transition: all 10s ease-in-out; 
    -moz-transition: all 10s ease-in-out; 
    -o-transition: all 10s ease-in-out; 
    -ms-transition: all 10s ease-in-out; 
    border-radius:60px; 
    transition-duration: 10s; 
    } 

Answer 1

只需添加infinite您move動畫的結束。

CSS

-webkit-animation: move 40s infinite; 
animation: move 40s infinite; 

.chef { 
 
    background-image: url("../img/chef.png"); 
 
    background-position: left bottom; 
 
    background-size: auto 100%; 
 
    position: absolute; 
 
    background-repeat: no-repeat; 
 
    width:700px; 
 
    height:60px; 
 
    margin-top:90px; 
 
} 
 

 
@-webkit-keyframes move 
 
    { 
 
    from { 
 
     left: 0; 
 
    } 
 

 
    to { 
 
     left: 100%; 
 
    } 
 
} 
 

 
@keyframes move 
 
{ 
 
    from { 
 
     left: 0; 
 
    } 
 

 
    to { 
 
     left: 100%; 
 
    } 
 

 
} 
 

 

 
.chef { 
 
    padding-right: 20px; 
 
    left: 100%; 
 
    position: absolute; 
 
    -webkit-animation: move 40s infinite; 
 
    animation: move 4s infinite; 
 
} 
 

 
.chef img { 
 
    -webkit-transition: all 10s ease-in-out; 
 
    -moz-transition: all 10s ease-in-out; 
 
    -o-transition: all 10s ease-in-out; 
 
    -ms-transition: all 10s ease-in-out; 
 
    border-radius:60px; 
 
    transition-duration: 10s; 
 
    }

<div class="cityscape"> 
 
    <div class="chef">hello</div> 
 
</div>

---

附：我也注意到，對於你的動畫，你打電話to兩次，試圖讓它停止在50%，然後繼續。這不是做到這一點的方法。如果你想做到這一點，請使用百分比代替，如下所示：

@keyframes example { 
    0% {left: 0;} 
    50% {left: 50%} 
    100% {left: 100%} 
}