CSS 애니메이션은 무엇으로 구성되어 있나요?

CSS 애니메이션은 키프레임, 애니메이션 속성, CSS 속성의 세 부분으로 구성됩니다. 키프레임은 다양한 단계에서 애니메이션 상태를 정의하는 데 사용됩니다. 애니메이션 속성은 재생 기간, 재생 횟수, 애니메이션 재생에 사용할 기능을 결정하는 데 사용됩니다. CSS 속성은 다양한 키프레임 아래의 CSS 요소 상태를 지정하는 데 사용됩니다. .

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

CSS 애니메이션은 키프레임, 애니메이션 속성, CSS 속성의 세 부분으로 구성됩니다.

• 키프레임(keyframes) - 다양한 단계에서 애니메이션 상태를 정의합니다.

• 애니메이션 속성(properties) - 애니메이션 재생 기간, 재생 시간, 애니메이션 재생에 사용할 기능 등을 결정합니다. (오디오 및 비디오 플레이어와 비교 가능)

• css 속성 - 다양한 키 프레임에서 CSS 요소의 상태를 지정합니다.

1. 키 프레임

은 CSS 애니메이션 기간의 동작을 정의하고 간단한 애니메이션을 만드는 데 사용할 수 있는 @keyframes 규칙을 사용하여 지정됩니다.

애니메이션은 시간에 따른 CSS 속성 변경을 표현한다는 점에서 전환과 유사합니다. 주요 차이점은 속성 값이 변경될 때(예: 마우스 오버 시 속성 값이 변경될 때) 전환이 암시적으로 트리거되지만 애니메이션 속성이 적용될 때 애니메이션이 명시적으로 수행된다는 것입니다. 따라서 애니메이션은 애니메이션 속성에 대한 명시적인 값을 표시해야 합니다. 이 값은 @keyframes 규칙에 지정된 애니메이션 키프레임에 의해 정의됩니다. 따라서 @keyframes 규칙은 시간에 따라 속성 값이 어떻게 변하는지 설명하는 캡슐화된 CSS 스타일 규칙 세트로 구성됩니다.

2. 애니메이션 속성

@keyframes를 통해 애니메이션을 생성하고, 요소에 애니메이션을 적용하려면 애니메이션(animation) 속성이 필요하며, 애니메이션 반복 횟수, 시작 값과 끝 값을 교대로 설정할지 여부 등을 설정합니다. 애니메이션을 실행해야 하는지 아니면 일시중지해야 하는지 여부입니다.

애니메이션 속성은 가장 기본적인 플레이어의 관련 기능으로 이해될 수 있습니다: 재생/일시 중지, 재생 시간, 재생 순서(역방향/정방향/대체 재생), 루프 수 등.

animation:
[animation-name] [animation-duration] // 애니메이션의 이름과 지속 시간
[animation-timing-function][animation-delay] // 시간에 관한 함수(속성/t), 지연 시간
[animation-iteration-count] [animation-direction] // 재생 횟수, 재생 순서
[animation-fill-mode] [animation-play-state] // 재생 전 또는 정지 후 해당 스타일을 설정하고 애니메이션을 제어합니다. 또는 일시 중지하세요.

키프레임 + 애니메이션 속성 구문:

/* 定义动画*/
@keyframes 动画名称{
    /* 样式规则*/
}

/* 将它应用于元素 */
.element {
    animation-name: 动画名称（在@keyframes中已经声明好的）;

    /* 或使用动画简写属性*/
    animation: 动画名称 1s ...
}

@keyframes 규칙의 중괄호 안에는 무엇이 있나요?

중괄호 안에 애니메이션 중 특정 지점에서 애니메이션되는 속성 값을 지정하는 키프레임이나 웨이포인트를 정의해야 합니다. 이를 통해 애니메이션 시퀀스의 중간 단계를 제어할 수 있습니다. 예를 들어 간단한 애니메이션 @keyframe은 다음과 같습니다.

@keyframes change-bg-color {
    0% {
        background-color: red;
    }
    50% {
        background-color: blue;
    }
    100%{
    background-color: red;
    }
}
.demo{
 -webkit-animation:change-bg-color 5s infinite;
         animation: change-bg-color 5s infinite;
}

실행 효과:

'0%', '50%', '100%'는 키프레임 선택기이며, 각 선택기는 하나의 키프레임 규칙을 정의합니다. 키프레임 규칙의 키프레임 선언 블록은 속성과 값으로 구성됩니다.

위 애니메이션은 간단한 전환 효과와 유사합니다. 배경색은 애니메이션 시작 시 한 값(0%)에서 시작하여 중간에 한 값(50%)에 도달하고 마지막에 다른 값(100%)에 도달합니다. 애니메이션 끝. "0%", "50%" 및 "100%" 키프레임 선택기는 애니메이션 속성이 값을 변경하려는 중간 지점 또는 백분율 지점을 정의합니다. 각각 0%와 100%를 사용하는 대신 선택기 키워드 from, to를 사용할 수도 있습니다.

@keyframes change-bg-color {
   from{
        background-color: red;
    }
    50% {
        background-color: blue;
    }
    to{
    background-color: red;
    }
}

키프레임 선택기는 쉼표로 구분된 하나 이상의 백분율 값 또는 from 및 to 키워드로 구성됩니다. 백분율 값에는 백분율 단위 지정자를 사용해야 합니다. 따라서 '0'은 유효하지 않은 키프레임 선택자입니다.

다음은 쉼표로 구분된 여러 백분율 값 및/또는 키워드 키프레임 선택기 from 및 to를 포함하는 키프레임 선택기가 있는 애니메이션의 예입니다.

@keyframes bouncing {
    0%, 50%, 100% { /* 或者 from, 50%, to */
        top: 0;
    }
    25%, 75% {
        top: 100px;
    }
}

위의 @keyframes 규칙은 다음을 정의합니다. 요소의 상단 오프셋은 애니메이션의 시작, 중간, 끝에서 0과 같고 1/4 및 3/4 지점에서 100픽셀과 같습니다. 요소는 애니메이션 루프에서 여러 번 위아래로 움직입니다.

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

위 내용은 CSS 애니메이션은 무엇으로 구성되어 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!