CSS - keyframes 애니메이션

동적인 애니메이션은 자바스크립트를 사용하지 않고 CSS 와 HTML 만으로 구현할 수 있습니다. 형식은 다음과 같습니다.

@keyframes 이름 {
 시간 비율 { 내용 }
 시간 비율 { 내용 }
  ...
}

선택자 {
 animation-name: @keyframes 이름
 animation-duration: 시간. Ex.) 1s 1초
 animation-iteration-count: 반복횟수 | infinite 중 하나
}

여기서 @keyframes 의 이름과 선택자의 animation-name 의 이름이 동일해야 합니다.

속 성	설 명
@keyframes	애니메이션 코드를 지정 from: 0 % 와 동일 to: 100 % 와 동일 시간 비율: 퍼센트
animation-delay	애니메이션을 시작하기 전 대기시간을 지정 초(s) | 밀리 초(ms) 중 하
animation-direction	애니메이션을 앞으로 재생할지 역방향으로 재생할지 지정. (또는 다시 처음부터 시작할지 역방향으로 진행할지 결정) normal: 애니메이션이 기본으로 재생됨. 기본값. reverse: 애니메이션이 역방향으로 재생됨 alternate: 애니메이션이 앞으로 재생된 후 역방향으로 다시 재생됨. alternate-reverse: 애니메이션이 역방향으로 재생된 후 앞으로 다시 재생됨
animation-duration	애니메이션이 완료되는 데 걸리는 시간. 초(s) | 밀리 초(ms) 중 하나
animation-fill-mode	애니메이션 대기(혹은 종료)할 때 요소의 스타일을 지정. none: 프레임 시작 전 후에 스타일을 적용하지 않음 forwards: 프레임 종료할 때 설정한 스타일을 적용 backwards: 프레임 시작할 때 설정한 스타일을 적용 both: 프레임 시작, 종료에 설정한 스타일을 적용
animation-iteration-count	애니메이션 재생 횟수 횟수 | infinite 중 하나. infinite 이면 무한 반복
animation-name	@keyframes 이름
animation-play-state	애니메이션을 잠시 멈출지 아니면 다시 시작할지를 지정 paused: 애니메이션을 일시 중지 running: 애니메이션을 정상 실행함.
animation-timing-function	애니메이션의 속도를 지정 linear: 시작부터 끝까지 동일한 속도를 유지 ease: 처음 느리게 시작해서 속도가 점점 빨라지다가 마지막에 다시 느려짐. 기본값 ease-in: 처음 시작할 때 느리게 시작함 ease-out: 마지막에 속도가 느려짐 ease-in-out: 처음 시작할 때와 마지막에 속도가 느려짐
animation	위 속성을 한꺼번에 지정. Ex.) animation: keyframe_name 5s infinite;

<style> 
#box{
  width: 100%;
  height: 100px;
  font-size: 100%;
  background-color: yellow;
  animation-name: user-animation01;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes user-animation01 {
  to {background-color: pink; font-size: 500%}
}
</style>

<div id="box">안녕 하보니</div>

안녕 하보니

5초의 시간에서 30% 경과시 빨강에서 노랑으로 변하고, 60% 경과했을 때 다시 핑크로 변합니다. 마지막으로 100% 되었을 때 파랑으로 변하는 애니메이션입니다.

<style> 
#box span{
  animation-name: user-animation02;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

@keyframes user-animation02 {
  0% {color: red}
  30% {color: yellow}
  60% {color: pink}
  100% {color: blue}
}
</style>

<h2 id="box"><span>안녕</span> 하보니</h2>

안녕 하보니