애니메이션

°animation-name

°animation-duration

°animation-timing-function

°animation-delay

°animation-iteration-count

°animation-direction

°animation-fill-mode

°animation-play-state

애니메이션 이름

이거 네가 쓰는 이름이야.

애니메이션 기간

이 속성은 애니메이션이 주기를 완성하는 데 걸리는 시간을 지정합니다.

문법

애니메이션 지속 시간: 6s;

가치관

* 시간(s-ms)
애니메이션이 시작되기 전의 시간 오프셋을 정의합니다.

애니메이션 타이밍 기능

이 속성은 애니메이션이 주기별 지속 시간 내에 어떻게 진행되는지 설정합니다.

문법

애니메이션 시간 계산 기능: 가볍기;
애니메이션 시간 계산 기능: 가볍기;
애니메이션 시간 계산 기능: 늦추기;
애니메이션 시간 계산 기능: 속도 늦추기;
애니메이션 시간 계산 기능: 선형;
애니메이션 시간 계산 기능: 걸음 길이 시작;
애니메이션 시간 계산 기능: 걸음 길이 종료;

가치관

1-

애니메이션은 느리게 시작하고 중간에 가속하며 마지막에 느려진다.
2-

애니메이션은 끝날 때까지 느리게 시작하고 점점 빨라진다.
3-

애니메이션이 끝날 때까지 빠르게 시작하고 속도를 줄입니다.
4-

애니메이션이 끝날 때까지 빠르게 시작하고 속도를 줄입니다.
긴장을 풀다
느린 속도가 느린 속도보다 길다.
5-

애니메이션에는 일정한 속도가 있습니다.
6-

애니메이션이 최종 상태로 바로 이동합니다.
7-

애니메이션은 끝날 때까지 초기 상태로 유지되다가 최종 상태로 넘어갑니다.
8-

steps () 를 정수와 함께 사용하면 종점에 도착하기 전에 특정 수량을 정의할 수 있습니다.원소의 상태는 점차적으로 변화하지 않고 서로 다른 순간에 한 상태에서 다른 상태로 뛴다.

애니메이션 지연 시간

이 특징은 순환이 시작될 때 이동이 시작되는 지연이다

문법

애니메이션 지연: 3s;

가치관

* 시간
애니메이션이 시작되기 전의 시간 오프셋을 정의합니다.

인스턴스

애니메이션 반복 계수

이 속성은 단일 순환의 중복 횟수를 계산합니다

문법

애니메이션 교체 횟수: 무한;
애니메이션 교체 횟수: 3;

가치관

* 무한
애니메이션은 영원히 반복됩니다.
* 시간
애니메이션이 시작되기 전의 시간 오프셋을 정의합니다.

인스턴스

애니메이션 방향

이 속성 설정은 애니메이션을 앞, 뒤로 또는 앞뒤로 재생해야 합니다.

문법

애니메이션 방향: 법선;
애니메이션 방향: 반전;
애니메이션 방향: 교체;
애니메이션 방향: 교대 반전;

가치관

* 정상
* 역방향
* 대기
* 교체 후진

인스턴스

1 - 정상

애니메이션이 앞으로 재생됩니다.종점에 도달하면 첫 번째 키프레임에서 다시 시작됩니다.
2-후진

애니메이션 뒤로 재생: 마지막 키프레임에서 시작하여 첫 번째 키프레임에서 끝냅니다.
3 - 예비

먼저 애니메이션을 앞으로 재생한 다음 뒤로 재생합니다.
- 첫 번째 키프레임부터
- 마지막 키프레임에서 중지
- 다시 시작하지만 마지막 키프레임에서
- 첫 번째 키프레임에서 중지
4-교대 후진

먼저 애니메이션을 뒤로 재생한 다음 앞으로 재생합니다.
- 마지막 키프레임부터
- 첫 번째 키프레임에서 중지
- 다시 시작하지만 첫 번째 키프레임에서
- 마지막 키프레임에서 중지

애니메이션 채우기 모드

이 기능은 세션이 끝난 후에 작동하며, 항목을 시작 위치로 되돌리거나 보존하는 방법

문법

애니메이션 채우기 모드: 없음;
애니메이션 채우기 모드: 앞으로;
애니메이션 채우기 모드: 뒤로;
애니메이션 채우기 모드: 둘 다;

가치관

* 없음
* 전달
* 뒤로
* 둘 다

인스턴스

1 - 없음

애니메이션 스타일은 기본 스타일에 영향을 주지 않습니다. 요소는 애니메이션이 시작되기 전에 기본 상태로 설정하고 애니메이션이 끝난 후에 기본 상태로 돌아갑니다.
2-앞으로

애니메이션이 끝날 때 적용된 마지막 스타일은 나중에 유지됩니다.
3 - 뒤로

애니메이션 스타일은 애니메이션이 실제로 시작되기 전에 적용됩니다.
4 - 둘

애니메이션을 재생하기 전과 후에 스타일을 적용합니다.

애니메이션 재생 상태

이 속성은 애니메이션이 실행 중인지 일시 중지 중인지 설정합니다.

문법

애니메이션 재생 상태: 실행;
애니메이션 재생 상태: 일시정지;

가치

* 실행 중
* 일시 중지

예:

날짐승

강설

출처
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations
https://www.quackit.com/css/css3/properties/css_animation.cfm
https://cssreference.io/animations/