僅在右側css3動畫延遲

Question

我正在創建CSS3動畫以使div從左到右移動無窮大。

該代碼正在工作，但當div進入右側時，其延遲時間爲3秒。在左邊，它工作得很好。

這裏是我的代碼：

#najava { 
 
    width: 197px; 
 
    height: 22px; 
 
    border-radius: 2px; 
 
    background-color: transparent; 
 
    opacity: 0.8; 
 
    font-weight: bold; 
 
    position: relative; 
 
    padding-left: 5px; 
 
    padding-right: 5px; 
 
    animation: mymove 5s linear 0s infinite alternate-reverse; 
 
    font-size: 16px; 
 
    font-family: Tahoma, Geneva, sans-serif; 
 
} 
 
@keyframes mymove { 
 
    0% { 
 
    left: 0px; 
 
    } 
 
    100% { 
 
    left: 200px; 
 
    } 
 
} 
 
@keyframes mymove { 
 
    0% { 
 
    background-color: transparent; 
 
    left: 0px; 
 
    right: 0px; 
 
    } 
 
    33% { 
 
    background-color: yellow; 
 
    left: 250px; 
 
    right: 0px; 
 
    } 
 
    66% { 
 
    background-color: blue; 
 
    left: 250px; 
 
    right: 250px; 
 
    } 
 
    100% { 
 
    background-color: green; 
 
    left: 0px; 
 
    right: 250px; 
 
    } 
 
}

<div id="najava"> 
 
    <p>text text text text text</p> 
 
</div>

Answer 1

不同的組織，也許？

#najava { 
 
    width: 197px; 
 
    height: 22px; 
 
    border-radius: 2px; 
 
    background-color: transparent; 
 
    opacity: 0.8; 
 
    font-weight: bold; 
 
    position: relative; 
 
    padding-left: 5px; 
 
    padding-right: 5px; 
 
    animation: mymove 3s linear 0s infinite alternate-reverse; 
 
    font-size: 16px; 
 
    font-family: Tahoma, Geneva, sans-serif; 
 

 
} 
 

 

 
@keyframes mymove { 
 
    0% { left: 0px; } 
 
    100% { left: 200px; } 
 
    } 
 
@keyframes mymove { 
 
    0% {background-color:transparent; left:0px; } 
 
    25% {background-color:yellow; left:100px; } 
 
    50% {background-color:blue; left:200px; } 
 
    75% {background-color:red; left:100px; } 
 
    100% {background-color:green; left:0px;} 
 
}

<div id="najava"> 
 
\t \t <p>text text text text text</p> 
 
\t </div>

附：增加了5個步驟，但你可以玩的價值...

Answer 2

改變你的CSS有點

CSS：

@keyframes mymove { 
    0% {background-color:transparent; left:0px} 
    33% {background-color:yellow; left:250px} 
    66% {background-color:blue; left:0px; right:250px;} 
    100% {background-color:green; left:250px;} 
} 

全部WO rking代碼：

#najava { 
 
    width: 197px; 
 
    height: 22px; 
 
    border-radius: 2px; 
 
    background-color: transparent; 
 
    opacity: 0.8; 
 
    font-weight: bold; 
 
    position: relative; 
 
    padding-left: 5px; 
 
    padding-right: 5px; 
 
    animation: mymove 5s linear 0s infinite alternate-reverse; 
 
    font-size: 16px; 
 
    font-family: Tahoma, Geneva, sans-serif; 
 
} 
 

 
@keyframes mymove { 
 
    0% {background-color:transparent; left:0px} 
 
    33% {background-color:yellow; left:250px} 
 
    66% {background-color:blue; left:0px; right:250px;} 
 
    100% {background-color:green; left:250px;} 
 
}

<div id="najava"> 
 
    <p>text text text text text</p> 
 
</div>

這裏是關鍵幀的工作Demo

Answer 3

這是原因爲什麼發生這種情況。

你的問題在於事實上，在66％，沒有任何事情發生。 left仍然在250px，這使它只是留在它的位置。動畫按照其編程的方式運行。

要解決這個不受歡迎的行爲，你需要刪除66％行並將其更改爲一個簡單的0％，50％，100％的動畫。

@keyframes mymove { 
    0% {background-color:transparent; left:0px; right:0px;} 
    50% {background-color:yellow; left:250px; right:0px;} 
    100% {background-color:green; left:0px; right:250px;} 
}  

這種改變可以確保在50％，股利是正確的，並以100％/ 0％，這是一路向左。