CSS ④ 전환 효과 - (2) 애니메이션 속성

애니메이션 속성은 전환 효과 속성과 함께 CSS3에서 새로 추가됐는데, 전환보다 더 정확하고 부드럽게 제어 가능합니다.

키 프레임 정의하기

애니메이션 키 프레임은 애니메이션 동작을 구성하는 단계들을 정의하는 것 입니다.
요소가 어떤 상태에서(from) 어떤 상태로 변하는지(to)를 정의 합니다.

@keyframes 키프레임명 {
  from {
  
  }
  to {
  
  }
}

@keyframes 키프레임명 {
  0% {

  }
  50% {

  }
  100% {

  }
}

animation-name 속성

animation-name 속성은 특정 요소에서 적용할 키 프레임명을 지정 합니다.

animation-name: 키프레임명;

animation-duration 속성

애니메이션 지속 시간 설정

animation-duration: 지속시간;

animation-delay 속성

애니메이션 실행 지연 시간 지정

animation-delay: 지연시간;

animation-iterator-count 속성

애니메이션은 기본으로 1회 실행되고 종료됩니다.
상황에 따라 애니메이션을 반복해서 보여줘야 하는 경우에 사용 합니다.

기본 형태)
animation-iteration-count: 횟수;
무한 반복)
animation-iteration-count: infinite;

animation-play-state 속성

애니메이션의 재생 상태를 지정합니다.

paused : 애니메이션의 실행을 일시 정지 합니다.

running : 애니메이션을 실행합니다.

전환 효과 속성과 다르게 애니메이션은 속성과 실행 도중 일시 정지하거나 재실행 할 수 있습니다.

해당 기능은 자바스크립트의 기능이 필요 합니다.

animation-direction 속성

애니메이션의 진행 방향 지정

animation 속성으로 한번에 지정하기

속성값은 전부 다 적을 필요는 없고, 필요한 항목만 적어도 됩니다.

예제1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .container {
      width: 100px;
      height: 100px;
      background-color: antiquewhite;
      /* 무한반복 */
      animation-iteration-count: infinite;
      animation-name: bgChange;
      animation-duration: 5s;
    }
    @keyframes bgChange {
      0% {background-color: red;}
      25% {background-color: orange;}
      50% {background-color: yellow;}
      100% {background-color: green;}
    }
  </style>
</head>
<body>
  <div class="container"></div>
</body>
</html>

예제2

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #container {
      width: 500px;
      /* top, bottom 20px / auto는 좌우 중간 정렬 */
      margin: 20px auto;
    }
    .box {
      width: 100px;
      height: 100px;
      float: left;
      margin: 50px;
    }
    #box1 {
      background-color: #4cff00;
      border: 1px solid transparent;
      animation-name: shape;
      animation-duration: 3s;
      animation-iteration-count: 10;
    }
    #box2 {
      background-color: #8f06b0;
      border: 1px solid transparent;
      animation-name: rotate;
      animation-duration: 3s;
      animation-iteration-count: 10;
    }
    @keyframes shape {
      from {
        border: 1px solid transparent;
      }
      to {
        border: 1px solid #000;
        border-radius: 50%;
      }
    }
    @keyframes rotate {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(45deg);
      }
    }
  </style>
</head>
<body>
  <div id="container">
    <div class="box" id="box1"></div>
    <div class="box" id="box2"></div>
  </div>
</body>
</html>

예제3

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>애니메이션 일시 정지, 재실행</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: red;
      position: relative;
      animation-name: move;
      animation-duration: 10s;
      animation-fill-mode: forwards;
      animation-play-state: paused;
    }
    @keyframes move {
      from {
        left: 0;
      }
      to {
        left: 300px;
      }
    }
  </style>
</head>
<body>
  <div>
    <button id="start">시작</button>
    <button id="paused">일시정지</button>
  </div>
  <script>
    const box = document.querySelector("div");
    document.getElementById("start").addEventListener("click", function() {
      box.style.animationPlayState = "running";
    })
    document.getElementById("paused").addEventListener("click", function() {
      box.style.animationPlayState = "paused";
    })
  </script>
</body>
</html>

저작자표시 비영리 변경금지 (새창열림)

'🎨 Frontend > HTML & CSS' 카테고리의 다른 글

CSS ⑤ 웹 폰트, 아이콘 폰트 사용하기 + 실습예제 (0)	2023.03.16
CSS ④ 전환 효과 - (3) 변형 효과(transform) (0)	2023.03.16
CSS ④ 전환 효과 - (1) transition, 실습 예제(쇼핑몰 상품 목록) (2)	2023.03.15
CSS ⭐ ③ 필수 속성 - (3) 연습 문제 (2)	2023.03.15
CSS ⭐ ③ 필수 속성 - (2) 화면 배치 (1)	2023.03.15