CSS3 애니메이션에는 실행 순서가 있나요?

CSS3 애니메이션에는 실행 순서가 있습니다. CSS의 애니메이션 실행 순서는 변환에 의해 설정된 가장 바깥쪽 속성부터 시작하며 구문은 "변환: 마지막으로 실행된 액션 속성(속성값)...처음 실행된 액션 속성(속성값);"입니다. 애니메이션에 오프셋 동작과 회전 동작이 있는 경우 회전은 원래 중심점을 기준으로 하므로 애니메이션을 수행할 때 먼저 변형한 다음 오프셋해야 합니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

css3 애니메이션에 실행 순서가 있나요?

css3 애니메이션에 실행 순서가 있나요?

Transform 애니메이션의 실행 순서는 가장 바깥쪽 속성부터 시작됩니다. 예: 변환:translateX(100px) 회전(30deg) , 애니메이션은 처음 30도 회전한 다음 100픽셀의 오프셋을 회전합니다.

　transform:rotate(30deg)translateX(100px)로 전환하면 애니메이션이 먼저 100픽셀만큼 오프셋된 다음 30도만큼 회전됩니다. 여기서는 먼저 오프셋한 다음 회전해야 한다는 점에 유의하세요. 점 회전의 예

는 다음과 같습니다.

따라서 애니메이션을 할 때는 다른 변형을 먼저 한 다음 오프셋을 적용합니다.

(학습 영상 공유: css 영상 튜토리얼, html 영상 튜토리얼)

위 내용은 CSS3 애니메이션에는 실행 순서가 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!