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 и 10, как вы пытались, вместо этого вам придется придерживаться одного из этих свойств в вашей анимации (BTW, это также относится к top и bottom).

Кроме того, я удалил transition стиль из #splash { ... } правило, нет необходимости при работе с @keyframes и animation стилей.