키프레임
- 키프레임은 애니메이션의 한 사이클이 진행됨에 따라 적용할 CSS 속성을 진행도에 따라 나누어 작성하는 것이다.
- 아래와 같이 키 프레임을 선언한다.
- 완성도 퍼센트 값을 작성하지않고
0% ~ 100% 까지를 form 과 to 로 대체할 수 있다.
@keyframes { [완성도]% { } [완성도]% { } [완성도]% { } [완성도]% { } .... }
animation-name
- 적용할 애니메이션(키프레임)을 지정한다.
- 기본값 :
none
- 속성값
none : 애니메이션 없음[키프레임 이름]
animation-delay
- 애니메이션이 작동하기 까지의 지연시간을 지정한다.
- 기본값 : 0
- 속성값 :
[시간]
animation-duration
- 키프레임의 사이클이 1회 완성되는데 걸리는 시간을 지정한다.
- 속성값 :
[시간]
animation-iteration-count
- 애니메이션이 반복될 횟수를 지정한다.
- 속성값
infinite : 애니메이션을 무한대로 지정한다.[숫자]
animation-play-state
- 애니메이션 실행 상태를 지정한다.
- 속성값
paused : 애니메이션 실행을 중단한다.running : 애니메이션을 실행한다.
animation-timing-function
- 애니메이션이
0% 부터 100% 까지 완성되는 동안, 시간의 흐름에 따른 애니메이션 완료율에 대한 함수이다.
- 속성값
easeease-inease-outease-in-outlinearcubic-bezier함수
예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>