CSS의 애니메이션

CSS의 애니메이션은 @keyframes와 animation-*의 두 부분으로 구성됩니다.

@keyframes at-규칙

첫 번째 부분에서는 @keyframes를 정의해야 합니다.

이를 통해 애니메이션 지속 시간의 다양한 지점에 적용해야 하는 CSS 스타일을 지정할 수 있습니다.

다른 시점은 % 값으로 지정됩니다. 0~100% 사이에서 오프셋 위치를 원하는 만큼 지정할 수 있습니다.

from은 오프셋 0%에 사용할 수 있으며, to는 오프셋 100%와 동일합니다.

    @keyframes anim-name {
        from { css-style-a }
        to { css-style-b }
    }

아래 CSS 스타일은 하나의 속성(배경색)에 대해 세 가지 시점에 대해 지정되었습니다.

    @keyframes colorit {
        0% { background-color: red; }
        50% { background-color: yellow; }
        100% { background-color: silver; }
    }

여러 속성을 지정할 수도 있습니다.

    @keyframes colorit {
        0% { 
            background-color: red; 
            left: 0px; 
            top: 50px;
        }
        50% { 
            background-color: yellow; 
            left: 50px; 
            top: 75px;
        }
        100% { 
            background-color: silver; 
            left: 200px;
            top: 25px;
        }
    }

animation-* 속성

다음은 애니메이션의 UI/UX를 제공하기 위해 스타일 전환을 수행하는 방법을 제어하는 ​​데 사용할 수 있는 속성 목록입니다.

• 애니메이션 구성
• 애니메이션 지연
• 애니메이션 연출
• 애니메이션 지속 시간
• 애니메이션 채우기 모드
• 애니메이션 반복 횟수
• 애니메이션 이름
• 애니메이션 재생 상태
• 애니메이션 범위
• 애니메이션-범위-끝
• 애니메이션 범위 시작
• 애니메이션-타임라인
• 애니메이션 타이밍 기능

이 하위 속성 각각은 애니메이션의 일부 측면을 설정합니다.

아래는 colorit이라는 이름의 @keyframes가 3초간 실행되도록 정의한 것입니다.

    div.box {
        ...
        animation-name: colorit;
        animation-duration: 3s;
        ...
    }

모든 하위 속성은 애니메이션 약칭을 사용하여 한 줄에 지정할 수 있습니다.

animation: 3s colorit;

브라우저는 필요한 계산을 수행하고 적절한 애니메이션을 렌더링합니다.

마찬가지로 애니메이션 속성을 사용하면 디자이너가 자신의 비전을 달성할 수 있도록 지연, 타이밍, 횟수(반복), 방향 등을 제어할 수 있습니다.

위 내용은 CSS의 애니메이션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!