*키프레임: 애니메이션 중간에 스타일이 변경되는 지점 => @keyframes 속성으로 정의
1. 애니메이션의 속성
| @키프레임 | – 애니메이션이 변경되는 지점 지정 |
| 애니메이션 지연 | – 시작 시간 지정 |
| 애니메이션 기간 | – 실행 시간 지정 |
| 애니메이션 방향 | – 애니메이션이 끝난 후 다시 시작할지 또는 반대로 계속할지 여부를 나타냅니다. |
| 애니메이션 반복 횟수 | – 애니메이션 반복 횟수 지정 |
| 애니메이션 이름 | – @keyframes로 정의된 중간 상태 지정 |
| 애니메이션 타이밍 기능 | – 키프레임의 전환 상태 지정 |
| 생기 | – 위의 애니메이션 속성을 함께 그룹화하여 지정 |
1. @keyframes 속성, animation-name 속성
-@keyframes 속성: 애니메이션의 시작과 끝, 상태가 변하는 부분 지정
- 애니메이션에 도트 반을 추가하려면) 시작을 0%, 종료를 100%로 설정하고 키프레임을 50%로 추가합니다.
- 시작 및 종료 위치만 사용하려면 0%, 100% 값 대신 ~에서 ~까지 키워드를 사용하십시오.
-animation-name 속성: 웹 문서에서 여러 개의 애니메이션을 정의할 수 있기 때문에 애니메이션을 구분하기 위해 이름을 사용합니다.
2. 애니메이션 기간 속성
– 기본값이 0이므로 animation-duration 속성 값을 지정하지 않으면 애니메이션이 실행되지 않습니다.
3. 애니메이션 방향 속성
- normal(기본값): 에서 에서 까지 애니메이션 진행
- 역방향: 애니메이션을 에서 에서 로 다시 시작합니다(원래 방향 반대로).
- 대안: 홀수는 일반이 되고 짝수는 반전됩니다.
- Alternative-reverse: 홀수 케이스는 반전, 짝수 케이스는 정상
4. 애니메이션 반복 횟수 속성
– 애니메이션을 반복해서 보여줘야 할 때 사용
- Count: 애니메이션의 반복 횟수를 결정합니다.
- 무한 : 무한 반복 애니메이션
5. 애니메이션 타이밍 기능 속성
– 전환과 마찬가지로 애니메이션의 시작-중간-끝에서 속도를 지정하여 전체 속도 곡선을 만들 수 있습니다.
- 선의
- 쉬움
- 들어 오세요
- 안도
- 이지인 아웃
- 3차 베지어(n, n, n, n)
1-5 애니메이션 속성 한번에 보기
(*단, 이때 animation-duration 속성을 반드시 체크해야 하며, 실행 시간을 지정하지 않으면 기본값은 0이다.)
예)
.크레이트 {
애니메이션 이름: 이동;
애니메이션 시간: 3초;
애니메이션 타이밍 기능: Ease-In;
애니메이션 방향: 교대로;
애니메이션 반복 횟수: 무한;
}
붓다
.크레이트 {
애니메이션: 무한 탑승을 번갈아 가며 움직이는 3초
}
간단히 축소
