CSS3動畫應停止在位置75％

是否可以停止CSS3動畫75％，不應再顯示0％或至少延遲75％10秒？至於現在，當動畫完成它在CSS3動畫應停止在位置75％

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
    position: relative; 
 
    -webkit-animation-name: example; 
 
    /* Chrome, Safari, Opera */ 
 
    -webkit-animation-duration: 4s; 
 
    /* Chrome, Safari, Opera */ 
 
    animation-name: example; 
 
    animation-duration: 4s; 
 
} 
 
/* Chrome, Safari, Opera */ 
 

 
@-webkit-keyframes example { 
 
    0% { 
 
    background-color: red; 
 
    left: 0px; 
 
    top: 0px; 
 
    } 
 
    25% { 
 
    background-color: yellow; 
 
    left: 200px; 
 
    top: 0px; 
 
    } 
 
    50% { 
 
    background-color: blue; 
 
    left: 200px; 
 
    top: 200px; 
 
    } 
 
    75% { 
 
    background-color: green; 
 
    left: 0px; 
 
    top: 200px; 
 
    } 
 
}

<div></div>

來源

2015-04-30 Nouman

歡迎，請注意：求調試幫助（「？爲什麼不是這個代碼工作」）的問題必須包括所期望的行爲，一個特定的問題或錯誤的和必要的最短的代碼在問題本身中重現它。沒有明確問題陳述的問題對其他讀者無益。有一個原因要求你在添加jsfiddle鏈接時添加代碼，請不要繞過它 - 如果它包含用戶需要回答的所有內容，而不必去另一個站點 – SW4

There是一個很棒的格式化指南。請參考。如果您的問題真實可信，您將從社區獲得快速回復。 –

我已將相關代碼添加到您的問題中，請記住下次;） – SW4

我做了一些改動，以動畫位置0％顯示上，所有你需要做的就是複製你的75%動畫兩次，後來使用animation-fill-mode屬性並將其設置爲forwards以停止最後位置處的動畫。

Demo

div { 
    width: 100px; 
    height: 100px; 
    background-color: red; 
    position: relative; 
    -webkit-animation-name: example; /* Chrome, Safari, Opera */ 
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */ 
    animation-name: example; 
    animation-duration: 4s; 

    /* add these properties */ 
    -webkit-animation-fill-mode: forwards; 
    animation-fill-mode: forwards; 
} 

/* Chrome, Safari, Opera */ 
@-webkit-keyframes example { 
    0% {background-color:red; left:0px; top:0px;} 
    25% {background-color:yellow; left:200px; top:0px;} 
    50% {background-color:blue; left:200px; top:200px;} 
    75% {background-color:green; left:0px; top:200px;} 
    /* add the below one */ 
    100% {background-color:green; left:0px; top:200px;} 
}

來源

2015-04-30 07:32:42

感謝@Alien的快速幫助。 – Nouman

@Nouman您可以通過點擊除了我的答案之外的勾號來標記答案，以便它可以幫助未來的訪問者 –

CSS3動畫應停止在位置75％

回答

相關問題