css轉換跳轉到中心

Question

我在嘗試&在Chrome中學習將對象從左到右移動並淡出它，但我無法弄清楚爲什麼在開始時跳轉到中心。

https://jsfiddle.net/kissja74/3x8tgfut/

CSS：

#splash { 
position: absolute; 
animation-duration: 4s; 
animation-name: fadeOut; 
animation-fill-mode: forwards; 
transition:4s; 
right: 100%; 
} 

@keyframes fadeOut { 
from { 
left: 0; 
opacity: 1; 
} 
to { 
right: 0; 
opacity: 0; 
visibility: hidden; 
} 
} 

HTML：

<div id="splash">A</div> 

Answer 1

試試這個：

#splash { 
    position: absolute; 
    animation-duration: 4s; 
    animation-name: fadeOut; 
} 

@keyframes fadeOut { 
    from { 
    left: 0; 
    opacity: 1; 
    } 
    to { 
    left: 100%; 
    opacity: 0; 
    } 
} 

See this fiddle.

像@connexo在他的評論中說的，visibility不能動畫，但那不是問題。相反，您不能像您嘗試的那樣爲left和right設置動畫，相反，您必須堅持使用動畫中的其中一個屬性（順便說一句，這也適用於top和bottom）。

而且，我刪除了transition風格從#splash { ... }規則，與@keyframes和animation風格的工作時，它是沒有必要的。