CSS

4. Animation

애니메이션 효과는 HTML 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시킨다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 Sequence를 나타내는 키프레임(@keyframes)들로 이루어진다.

@keyframes

키프레임 rule을 사용하면 애니메이션 Sequence 중의 여러 시점(breakpoint)에서 CSS 프로퍼값을 지정할 수 있다.

<html>
<head>
  <style>
    div {
      position: absolute;
      width: 100px;
      height: 100px;
      background-color: red;
      animation-name: move;
      animation-duration: 5s;
      animation-iteration-count: infinite;
    }
    /* @keyframes rule */
    @keyframes move {
      /* keyframe */
      from {
        left: 0;
      }
      /* keyframe */
      to {
        left: 300px;
      }
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

See the Pen Untitled by Byeongyeong Kim (@beark93) on CodePen.

animation-name

사용하고자 하는 keyframe 룰을 적용하기 위해 사용하는 프로퍼티. 하나 이상의 애니메이 이름을 지정할 수 있다.

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      position: absolute;
      width: 100px;
      height: 100px;
      animation-name: move, fadeOut, changeColor;
      animation-duration: 5s;
      animation-iteration-count: infinite;
    }
    @keyframes move {
      from { left: 0; }
      to   { left: 300px; }
    }
    @keyframes fadeOut {
      from { opacity: 1; }
      to   { opacity: 0; }
    }
    @keyframes changeColor {
      from { background-color: red; }
      to   { background-color: blue; }
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

See the Pen Untitled by Byeongyeong Kim (@beark93) on CodePen.

animation-duration

한 싸이클의 애니메이션에 소요되는 시간을 지정(s, ms). 지정하지 않을 경우 0s로 설정되어 애니메이션이 동작 X

animation-timing-function

애니메이 효과를 위한 수치 함수를 지정한다. animation-timing-function 설명

animation-delay

요소가 로드된 시점과 애니메이션이 시작하는 시점 사이에 대기하는 시간을 지정(s, ms)

animation-iteration-count

애니메이션 주기의 재생 횟수. 기본값은 1이고 infinite로 무한반복할 수 있다.

animation-direction

애니메이션이 종료된 이후 반복될 때 진행하는 방향을 지정.

normal : 기본값으로 from에서 to로 진행
reverse : to에서 from으로 진
alternate : 홀수번째는 normal, 짝수번째는 reverse로 진행
alternate-reverse : 홀수번째는 reverse, 짝수번째는 normal로 진

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      width: 100px;
      height: 100px;
      background: red;
      position: relative;
      animation: myAnimation 5s infinite;
      /*홀수번째는 normal로, 짝수번째는 reverse로 진행*/
      animation-direction: alternate;
    }
    @keyframes myAnimation {
      0%   { background: red;    left: 0px;   top: 0px; }
      25%  { background: yellow; left: 200px; top: 0px; }
      50%  { background: blue;   left: 200px; top: 200px; }
      75%  { background: green;  left: 0px;   top: 200px; }
      100% { background: red;    left: 0px;   top: 0px; }
    }
  </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

See the Pen CSS Ani Exam3 by Byeongyeong Kim (@beark93) on CodePen.

animation-fill-mode

애니메이션 미실행 시(대기, 종료) 요소의 스타일을 지정한다.

none	대기	시작 프레임(from)에 설정한 스타일을 적용하지 않고 대기한다.
	종료	애니메이션 실행 전 상태로 애니메이션 요소의 프로퍼티값을 되돌리고 종료한다.
forwards	대기	시작 프레임(from)에 설정한 스타일을 적용하지 않고 대기한다.
	종료	종료 프레임(to)에 설정한 스타일을 적용하고 종료한다.
backwards	대기	시작 프레임(from)에 설정한 스타일을 적용하고 대기한다.
	종료	애니메이션 실행 전 상태로 애니메이션 요소의 프로퍼티값을 되돌리고 종료한다.
both	대기	시작 프레임(from)에 설정한 스타일을 적용하고 대기한다.
	종료	종료 프레임(to)에 설정한 스타일을 적용하고 종료한다.

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      width: 100px;
      height: 100px;
      font: bold 1em/100px san-serif;
      text-align: center;
      color: #fff;
      background: red;
      margin-bottom: 10px;
      position: relative;
      /*name duration timing-function delay iteration-count direction fill-mode play-state*/
      animation: myAnimation 2s linear 2s;
    }
    div:nth-of-type(1) {
      animation-fill-mode: none;
    }
    div:nth-of-type(2) {
      animation-fill-mode: forwards;
    }
    div:nth-of-type(3) {
      animation-fill-mode: backwards;
    }
    div:nth-of-type(4) {
      animation-fill-mode: both;
    }
    @keyframes myAnimation {
      0%   { left: 0px;   background: yellow; }
      100% { left: 200px; background: blue; }
    }
  </style>
</head>
<body>
  <h1>animation-fill-mode</h1>

  <div>none</div>
  <p>대기 : 시작 프레임(from)에 설정한 스타일을 적용하지 않고 대기한다.</p>
  <p>종료 : 애니메이션 실행 전 상태로 애니메이션 요소의 프로퍼티값을 되돌리고 종료한다.</p>

  <div>forwards</div>
  <p>대기 : 시작 프레임(from)에 설정한 스타일을 적용하지 않고 대기한다.
  <p>종료 : 종료 프레임(to)에 설정한 스타일을 적용하고 종료한다.

  <div>backwards</div>
  <p>대기 : 시작 프레임(from)에 설정한 스타일을 적용하고 대기한다.
  <p>종료 : 애니메이션 실행 전 상태로 애니메이션 요소의 프로퍼티값을 되돌리고 종료한다.

  <div>both</div>
  <p>대기 : 시작 프레임(from)에 설정한 스타일을 적용하고 대기한다.
  <p>종료 : 종료 프레임(to)에 설정한 스타일을 적용하고 종료한다.
</body>
</html>

See the Pen CSS Ani Exam4 by Byeongyeong Kim (@beark93) on CodePen.

animation-play-state

애니메이 재생 상태를 지정한다. 기본값은 running.

https://poiemaweb.com/css3-animation - 참고

728x90

저작자표시 (새창열림)