CSS 불투명도 애니메이션이 위치를 변경합니까?

Question

불투명도를 변경하는 데 CSS 애니메이션 속성을 사용하면 요소의 위치가 변경됩니까? 그렇다면 DOM에서 무슨 일이 일어나고 있으며 어떻게 상쇄 될 수 있습니까?

컨텍스트 : 클릭했을 때 클릭 한 이미지가 페이드 인하는 CSS 애니메이션을 시작하는 함수를 호출하는 이미지 세트에 Javascript EventListener를 추가했습니다. CSS 클래스를 제거하여 불투명도 0에서 불투명도 1로 클릭 한 이미지를 반환하는 타이머도 설정됩니다. 이미지가 왼쪽에서 위쪽으로 약간 벗어나서 원래대로 배치 한 곳과 원하는 곳에서 다시 나타납니다. 있다. Chrome과 Safari에서 같은 원치 않는 결과가 발생합니다.

다음은 CSS의 :

.hiddenanimal { 
    animation: animalfade 1s; 
    animation-fill-mode: forwards; 
} 

@keyframes animalfade { 
    from { opacity: 1; 
    } to { opacity: 0; 
    } 
} 

Answer 1

간단한 답변 : CSS 애니메이션은 당신이 그것을 말할 값을 변경합니다. 귀하의 예 :

유일한 변경 사항은 opacity입니다.

요소가 움직이는 경우 다른 요소가 발생하고 애니메이션 요소가 아닌 것일 수 있습니다.

DOM에서 무슨 일이 일어나는지 물어보십시오. 기술적으로 : 아무것도. CSS 값은 DOM이 아니라 시간이 지남에 따라 변합니다.

더 나은 예가 있으면 다른 사람들이 귀하의 질문에 더 잘 답변 할 수 있습니다. 나는 가정을했고, 나의 대답이 당신이 알고 싶어하는 것에도 가깝다는 것을 전혀 모른다. 일부 HTML 및 JavaScript를 포함하도록 질문을 업데이트 할 수 있다면 내 대답을 수정할 수 있습니다. (단지 추측 반대로)