수업/└HTML&CSS
애니메이션(Animation)
onlyun
2022. 1. 4. 12:05
동적인 움직임.
ex) 로딩할 때 간단한 애니메이션 보여주는 용도로도 쓰임.
Animation
-키프레임 정의 : 사용할 애니메이션 정의
/* 변수명 */
@keyframes animationname { /* 단위별로 변경값-크기, 위치, 색상 등을 지정해 애니메이션 설정 */
0% { 시작값 } /* 필수 입력. 0% 대신 from 사용 가능 */
25% { 변경값 }
50% { 변경값 }
75% { 변경값 }
100% { 종료값 } /* 필수 입력. 100% 대신 to 사용 가능 */
}
그리고 그 애니메이션을 줄 태그에 속성값 설정
tag {
position:static; /* 기본값인데 이 상태에선 위치 이동 설정 안 먹힘. relative, absolute 등을 설정*/
animation: name duration timing-function delay iteration-count direction fill-mode play-state
/*이름*//*시간*//*시작·끝 타이밍*//*시작 지연*//*재생횟수*//*방향설정*//*…*//*재생 상태 설정*/
}
2. 애니메이션 속성 종류
(1) animation-direction : 방향 설정
tag { animation-direction:normal; }
/* 기본값 */
normal | reverse | alternate | alternate-reverse |
순방향 재생(기본값) | 역방향 재생 | 양방향 재생 홀수(순방향), 짝수(역방향) |
양방향 재생 홀수(역방향), 짝수(순방향) |
(2) animation-iteration-count : 반복 재생 횟수 설정
tag { animation-interation-count:1; } /* 기본값 */
/* 정수(1~ ), infinite(반복)*/
(3) animation-timing-function : 시작과 끝 타이밍 지정
tag { animation-timing-function:linear; }
linear | ease | ease-in | ease-out | ease-in-out |
일정한 속도 | 빠르게 시작했다 느려 | 점점 빨라짐 | 점점 느려짐 |
(4) animation-play-state : 재생 상태 설정
tag { animation-play-state:running; } /* 애니메이션 재생 */
tag { animation-play-state:paused; } /* 애니메이션 일시정지 */
(5) animation-fill-mode
애니메이션을 재생하고 있지 않을때 설정