CSS3의 두 가지 일시 중지 방법(전환, 애니메이션)에 대한 자세한 설명

좌표를 변경하는 두 가지 방법:

1. 기존 상단 및 왼쪽 좌표 수정

2. 속성

은 CSS3 애니메이션과 전환을 결합하여 캐릭터의 걷는 효과를 구현합니다. 일반적으로 말해서, 모션 상태는 제어 가능해야 추가 작업을 용이하게 할 수 있습니다. 애니메이션은 캐릭터의 움직임 변화, 즉 스프라이트 맵의 위치가 변경되는 것을 구현하는 데 사용되며, 트랜지션은 캐릭터의 왼쪽 변화, 즉 좌표가 오른쪽으로 이동하고 캐릭터가 앞으로 이동하는 것을 구현하는 데 사용됩니다. , 배경이 뒤로 이동합니다.

전환을 일시정지하는 방법
전환을 일반적으로 일시정지하고 싶은 곳은 프로그램 초기에 설정한 목표 지점이므로 이것은 실제로 제어할 필요도 없고 제어할 방법도 없습니다. 이것은 애니메이션 전환 효과입니다. 브라우저는 애니메이션 종료에 대한 콜백만 제공합니다. 물론 해결 방법이 있을 수 있습니다. 대상 전환 값을 강제로 변경하는 프로세스를 수행
작동 방법:

$("button:last").click(function() {
        var left = $boy.css('left');
        // 强制做了一个改变目标left的处理
        // 动画是要运行10秒,所以此时动画还是没有结束的
        $boy.css('left',left);
        // 增加暂停的样式
        $boy.addClass('pauseWalk');
 });

전환 중지는 왼쪽 값의 전류가 되도록 강제합니다.

자세한 내용은 위의 코드 블록을 참조하세요. 일시 중지 메서드의 전환은 일시 중지 효과를 얻기 위해 강제로 왼쪽 좌표를 설정해야 하지만 다음 시작은 이전 애니메이션을 기다려야 합니다. .시간이 끝났습니다.

애니메이션 일시정지 방법

CSS3 애니메이션 직접 제공 애니메이션 재생 상태 스타일을 사용하여 애니메이션 일시 중지 처리를 제어합니다. 컨트롤 일시정지 스타일을 추가하세요. 애니메이션 스타일을 작성할 때 다양한 브라우저의 호환성에 특히 주의하세요. 해당 접두사

.pauseWalk {
   -webkit-animation-play-state: paused;
   -moz-animation-play-state: paused;
}

를 추가하고 해당 애니메이션 캐릭터 요소 노드에 동적으로 추가하고 삭제하세요. 이 엘프의 시작과 일시 정지를 제어할 수 있습니다. 매우 간단합니다

[관련 권장 사항]

1. CSS3의 animation-direction 속성을 자세히 소개합니다

2. 꼭 마스터해야 할 CSS3 애니메이션(Animation)의 8가지 주요 속성

3. 루프 간 지연 실행을 구현하기 위해 애니메이션 속성을 사용하는 예제 튜토리얼

4. CSS3 애니메이션 종료 이벤트 예시 공유

위 내용은 CSS3의 두 가지 일시 중지 방법(전환, 애니메이션)에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!