CSS左0動畫與絕對定位的div來右0

http://jsfiddle.net/dfabulich/ncbzz5zu/3/

<html> 
<body> 
<style> 
.container { 
    position: relative; 
    width: 80%; 
    height: 100px; 
    border: 1px solid black; 
} 

@keyframes slide { 
    from { background-color: red; left: 0; } 
    to { background-color: blue; right: 0; } 
} 

.animated { 
    position: absolute; 
    width: 20%; 
    height: 100%; 
    top: 0; 
    background-color: red; 
    animation-duration: 3s; 
    animation-name: slide; 
    animation-iteration-count: infinite; 
} 

</style> 
<div class=container> 
<div class=animated> 
</div></div>

預計：紅色矩形應該順利動畫從左至右從紅色到藍色的顏色變化。

實際功能：在Chrome/Firefox中，紅色矩形慢慢改變顏色爲紫色，然後從左至右瞬移沒有動畫，然後慢慢從紫色到藍色的變化。在Safari中，矩形出現在右側，從此不會移動，同時從紅色變爲藍色。

這是怎麼發生的？我該如何解決它？（我需要解決它在CSS ...沒有JS，沒有jQuery的。）

來源

2017-05-31 Dan Fabulich

你不能「動畫」從一個_property_到另一個;您爲屬性的_value_設置動畫。在這種情況下，對於元素寬度爲20％的情況，您可以簡單地將動畫從0增加到80％。 – CBroe

你需要一個動畫財產或其他。您只需動畫左，要麼使用left: calc(100% - elemWidth)（其中elemWidth是元素的寬度）或left: 100%; transform: translateX(-100%);如果元素的寬度是未知的。

還需要動畫的背景顏色。

.container { 
 
\t position: relative; 
 
\t width: 80%; 
 
\t height: 100px; 
 
\t border: 1px solid black; 
 
} 
 

 
.animated { 
 
\t position: absolute; 
 
\t width: 20%; 
 
\t height: 100%; 
 
\t top: 0; 
 
\t background-color: red; 
 
\t animation: 3s linear 0s slide infinite; 
 
} 
 

 
@keyframes slide { 
 
    from { left: 0; } 
 
    to { 
 
    left: 100%; 
 
    transform: translateX(-100%); 
 
    background: blue; 
 
    } 
 
}

<div class=container> 
 
<div class=animated> 
 
</div></div>

來源

2017-05-31 21:53:37

@keyframes slide { 
    from { left: 0;} 
    to { left: 80%; } // edit: actually endpoint should point to left:100% minus width of the element so in your case 100%-20% = 80%. In case of width of the element in px use CSS calc like: left: calc(100% - ##px); 
}

簡單，當你使用right你告訴轉型改變完全不同的屬性。這就是爲什麼你跳到left: 0什麼是你的屏幕左邊到right: 0什麼是你的屏幕右邊緣。

來源

2017-05-31 21:50:12 NightKn8

謝謝！你能幫我理解這裏出了什麼問題嗎？ –

這會將框移到父窗口的右側。它不會改變背景顏色。 –

更新了代碼。 @MichaelCoker OP想澄清從左到右的過渡，顏色對他來說工作得很好。即使他的jsfiddle也只包含元素移動部分。 – NightKn8

<html> 
 
<body> 
 
<style> 
 
.container { 
 
    position: relative; 
 
    width: 80%; 
 
    height: 100px; 
 
    border: 1px solid black; 
 
} 
 

 
@keyframes slide { 
 
    0% { background-color: red; left: 0; } 
 
    100% { background-color: blue; left: 100%; margin-left: -20%; } 
 
} 
 

 
.animated { 
 
    position: absolute; 
 
    width: 20%; 
 
    height: 100%; 
 
    top: 0; 
 
    background-color: red; 
 
    animation-duration: 3s; 
 
    animation-name: slide; 
 
    animation-iteration-count: infinite; 
 
} 
 

 
</style> 
 
<div class=container> 
 
<div class=animated> 
 
</div></div>

看到這個片段中......

來源

2017-05-31 21:55:46 UXDart

的問題是，你開始動畫屬性left，但隨後在right更換動畫結束，這就是它的原因跳躍。你應該保持動畫相同的屬性，以逐步獲得動畫的進展。

.container { 
 
    position: relative; 
 
    width: 80%; 
 
    height: 100px; 
 
    border: 1px solid black; 
 
} 
 

 
@keyframes slide { 
 
    from { background-color: red; left: 0; } 
 
    to { background-color: blue; left: 80%; } 
 
} 
 

 
.animated { 
 
    position: absolute; 
 
    width: 20%; 
 
    height: 100%; 
 
    top: 0; 
 
    background-color: red; 
 
    animation-duration: 3s; 
 
    animation-name: slide; 
 
    animation-iteration-count: infinite; 
 
}

<div class="container"><div class="animated"></div></div>

來源

2017-05-31 21:59:00

這是它應該是什麼樣子：

http://jsfiddle.net/ncbzz5zu/11/

這是它的修復：

@keyframes slide { 
    from { background-color: red; 
     left:0%;} 
    to { background-color:blue; 
     left:80%;} 
}

基本上，動畫didnt知道自從你指定以來要做什麼ied最初的左側屬性，但不是目標值。它從left:0動畫到left:initial。正確履行類似的功能，但它的另一個屬性。

來源

2017-05-31 22:00:26 Voidvalkon

CSS左0動畫與絕對定位的div來右0

回答

相關問題