• GIF나 플래시처럼 웹 사이트에 애니메이션 효과 적용시 사용
  • 크기, 위치, 회전, 배경색 등 CSS 언어가 제공하는 대부분의 속성에 시간과 방향을 지정하여 애니메이션 효과 생성

*html 파일
 
<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>animation 속성</title>
    <link ref="stylesheet" href="CSS문서명.css" />
  </head>
 
  <body>
    <div id="animation"></div>
  </body>
</html>
*css파일 #transition {
  width: 300px;
  height: 300px;
  background-color: yellow;
 
  animation-name: changeWidth;
  animation-duration: 3s;
  animation-iteration-count: 6;
  animation-timing-function: ease;
  animation-direction: alternate;
  animation-delay: 2s;
}
 
/* @keyframes 옆에는 animation-name 속성의 속성값 입력 */
@keyframes changeWidth {
  from {
    width: 300px;
  }
  to {
    width: 600px;
  }
}

  • 적용할 애니메이션 이름 지정

  • 애니메이션이 from~to로 동작하는 데 걸리는 시간

  • 애니메이션 재생 횟수
  • 제한 없이 무한으로 적용하고 싶다면 infinite 속성값 적용

  • 속도를 어떻게 가속시키고 감속시킬지 설정
  • transition-timing-function 과 같다.

애니메이션의 진행 방향

  • normal : from -> to
  • reverse : to -> from
  • alternate : from -> to -> from
  • alternate-reverse : to -> from -> to

  • 애니메이션이 동작하는 시간을 지연시킬 때 사용
  • 기본값은 0s

  • 애니메이션이 효과를 지정하는 공간
  • from 와 to 키워드는 애니메이션의 시작과 끝 지점
  • 0% 와 100%를 입력할 수도 있음
@keyframes changeWidth {
  0% {
    width: 300px;
  }
  100% {
    width: 600px;
  }
}
  • 효과를 세밀하게 조정하고 싶다면 0%와 100% 사이에 숫자를 추가
@keyframes changeWidth {
  0% {
    width: 300px;
  }
  50% {
    background-color: red;
  }
  100% {
    width: 600px;
  }
}
  • 즉, 애니메이션이 진행되는 50% 지점에서 배경색이 노란색에서 빨간색으로 변화

*css파일 #transition {
  width: 300px;
  height: 300px;
  background-color: yellow;
 
  animation-name: changeWidth;
  animation-duration: 3s;
  animation-iteration-count: 6;
  animation-timing-function: ease;
  animation-direction: alternate;
  animation-delay: 2s;
}
 
/* @keyframes 옆에는 animation-name 속성의 속성값 입력 */
@keyframes changeWidth {
  from {
    width: 300px;
  }
  to {
    width: 600px;
  }
}

위의 animation 표현은 아래 표현처럼 한 줄로 표현할 수 있다.

*css파일 #transition {
  width: 300px;
  height: 300px;
  background-color: yellow;
 
  animation: changeWidth 3s 6 ease alternate 2s;
}

먼저 나오는 숫자(3s)는 duration, 나중에 나오는 숫자(2s)는 delay를 의미