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 중국어 웹사이트의 기타 관련 기사를 참조하세요!