Orchemi

Orchemi

I start where others stop.

[CSS] CSS3에 등장한 신조어 ‘animation’

작성:    

업데이트:

카테고리:

태그: , ,

animation- 속성

  • 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;
  }
}

가. animation-name

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

나. animation-duration

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

다. animation-iteration-count

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

라. animation-timing-function

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

마. animation-direction

애니메이션의 진행 방향

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

바. animation-delay

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

사. @keyframes 속성

  • 애니메이션이 효과를 지정하는 공간
  • 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를 의미

댓글남기기

참고