CSS 애니메이션을 어떻게 플레이하나요? (정리 및 공유)

이 글은 애니메이션이 무엇인지, 애니메이션을 호출하는 방법, 다중 키프레임 애니메이션을 구현하는 방법 등 CSS 애니메이션에 대한 관련 지식을 제공합니다.

1. 애니메이션이란

CSS에서 @keyframes를 사용하여 애니메이션을 정의할 수 있습니다
(키프레임은 "키 프레임"을 의미합니다)

대략 구조:

@keyframes rotation { /* rotation 动画名 */
    from {   /* 起始状态 */ 
        transform: rotate(0);
    }
    to {    /* 结束状态 */ 
        transform: rotate(360deg);
    }}

---

2. 애니메이션이 정의되면 animation 속성을 사용하여 호출할 수 있습니다.

animation 기본 속성:

name: 애니메이션 이름

(초기 기본값 없음)
• 
  duration: 애니메이션 지속 시간
(초기 기본값 0s)
• 
  timing 기능: 속도 곡선 변경
(초기 기본값 Ease) )
• 
  delay: 지연 시간(애니메이션이 시작되기까지 걸리는 시간)
(초기 기본값 0s)
• 
  iteration-count: 애니메이션 실행 횟수
(초기 기본값 1, 애니메이션을 영원히 실행하려면, 무한 쓰기)
• 
  

  animation:  name | duration | timing function | delay | iteration-count;

ex외 다음과 같은 몇 가지 속성이 있습니다:

animation-direction (애니메이션을 역방향으로 재생할지 여부 설정)

normal: 애니메이션을 일반적인 방식으로 재생합니다(초기 기본값) 값)

• reverse: 반대 방향으로 재생 Animation
• alternate: 애니메이션의 2번째, 4번째, 6번째...(짝수번째)를 자동으로 반전시킵니다.
• alternate-reverse: 홀수번째를 반전시킵니다.
• 
  

animation-fill-mode (애니메이션으로 설정 재생되지 않을 때의 애니메이션 상태)

none: 애니메이션의 기본 동작을 변경하지 마세요

• 앞으로: 최종 종료 상태에서 애니메이션 중지
• backwards: 키 프레임의 animation-delay 스타일로 지정된 시간 내에 첫 번째 애니메이션 적용
• both: 동시에 앞으로 및 뒤로 규칙을 따릅니다.
• 
  

animation -play-state (애니메이션 재생 또는 일시 정지 여부 설정)

paused: 애니메이션 재생을 일시 중지합니다.

• running: 애니메이션 일반 재생

3. 여러 효과를 얻으려면 이때 다중 키프레임을 사용할 수 있습니다.

---

일반 구조:

@keyframes changeColor {
	0% {
		background-color: red;
	}
	20% {
		background-color: orange;
	}
	40% {
		background-color: blue;
	}
	100% {
		background-color: green;
	}}

(학습 영상 공유:

css 영상 튜토리얼

)

위 내용은 CSS 애니메이션을 어떻게 플레이하나요? (정리 및 공유)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!