javascript - 변환으로 스크롤 효과를 생성하려면 두 요소가 필요한 이유

Question

작은 공의 포물선 효과를 얻기 위해 요소 하나를 작성하는 대신 두 개의 애니메이션을 수행하기 위해 요소의 두 레이어를 사용해야 하는 이유에 대해 다른 사람들의 기사를 읽었습니다.<p class="ball"></p> ? 그런 다음 변환을 사용하여 x 및 y 축을 수정하면 이와 같은 작성이 효과가 없다는 것을 알았습니다. 그런데 왜?

다른 사람의 코드입니다

이것은 내 코드입니다

으아악

css:

으아악

글 주소
/a/11...

Answer 1

첫눈에 문제가 발견되었습니다

으아아아

여기서 전반부만 반환하면 전체가 문자열입니다

으아아아

Answer 2

transition:0.6s all 큐빅 베지어(0.49, -0.29, 0.75, 0.41) 여기서 큐빅 베지어는 이동 속도이므로 하나만 쓰면 포물선 효과 없이 대각선 애니메이션으로 바뀌며 실제로 두 요소는 분해하는 것과 동일합니다. 속도