안녕하세요.
오늘은 CSS animation Keyframes을 알아보겠습니다.
CSS transition으로도 애니메이션을 구현할 수 있지만 Keyframes은 애니메이션이 동작하는 중간에도 변화를
줄 수 있다는 차이점이 있습니다.
애니메이션 중간에 스타일이 바뀌는 지점을 키프레임(keyframe)이라고 부릅니다.
@keyframes - 애니메이션 지점 설정하기
@keyframes 이름 {
선택자 {
스타일
}
}
animation-name - 애니메이션 이름 정하기
위에 keyframes 속성에서 지은 이름을 입력합니다.
div{
animation-name: circle;
}
animation-duration - 애니메이션 실행 시간 설정하기
얼마동안 재생할 것인지 설정합니다.
초(s)나 밀리초(ms)로 표시합니다.
div {
animation-duration: 1s;
}
animation-direction - 애니메이션 방향 지정하기
애니메이션이 끝나면 원래 위치로 돌아가는데 반대 방향으로 애니메이션을 실행할 수 있습니다.
기본 : normal
반대 : alternate
div {
animation-direction: alternate;
}
animation-iteration-count - 반복 횟수 지정하기
기본값은 1이고
infinite로 설정하면 무한반복합니다.
div {
animation-iteration-count: infinite;
}
animation-timing-function - 애니메이션 속도 곡선 지정하기
애니메이션의 시작과 중간, 끝에서의 속도를 선택합니다.
div {
animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier
}
animation 속성 - 애니메이션 관련 속성 한꺼번에 표기하기
div {
animation: move 3s alternate infinite ease-in;
}
See the Pen CSS keyframes by juyeol (@juyeol) on CodePen.
감사합니다.
