CSS 전환이 가운데로 이동합니다.

Question

크롬에서 & 개체를 왼쪽에서 오른쪽으로 이동하여 페이드 아웃하는 방법을 배우려고합니다. 그러나 전환이 시작시 중앙으로 점프하는 이유를 알 수 없습니다.

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을 애니메이션으로 만들 수는 없지만 애니메이션의 속성 중 하나를 고수해야합니다 (BTW, top 및 bottom에도 적용됨).

또한, 나는 @keyframes과 animation 스타일로 작업 할 때 그것을 필요는 없습니다의 #splash { ... } 규칙에서 transition 스타일을 제거했습니다.