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风格的工作时，它是没有必要的。