애니메이션 - 꼬리 흔드는 강아지 만들기

⭐️ 애니메이션 효과 : 꼬리 흔드는 강아지 ⭐️

---

01. 애니메이션 효과

애니메이션(Animation) 효과는 HTML 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시킵니다.
애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 연속된 장면(sequence)를 나타내는 복수의 키프레임(@keyframes)들로 이루어집니다.

   ___ 참고하기 ___
  `1   @keyframes : CSS 애니메이션에서 구간을 정하고 각 구간별로 어떤 스타일을 적용시킬지 정합니다.

---

02. 꼬리 흔드는 강아지 만들어보기

[1] < div > 박스 만들기

강아지의 움직임을 어떻게 표현할지 생각하고 박스를 만듭니다.

    <div class="dog">
    <div class="dog-body">
      <div class="dog-tail">
        <div class="dog-tail">
          <div class="dog-tail">
            <div class="dog-tail">
              <div class="dog-tail">
                <div class="dog-tail">
                  <div class="dog-tail">
                    <div class="dog-tail"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="dog-torso"></div>
    <div class="dog-head">
      <div class="dog-ears">
        <div class="dog-ear"></div>
        <div class="dog-ear"></div>
      </div>
      <div class="dog-eyes">
        <div class="dog-eye"></div>
        <div class="dog-eye"></div>
      </div>
      <div class="dog-muzzle">
        <div class="dog-tongue"></div>
      </div>
    </div>
  </div>

---

[2] CSS 설정하기

Scss 를 활용합니다.
@keyframes 을 이용하여 애니메이션의 움직임을 조절합니다.

    $dog-width: 100px;
    $interval: 200ms;
    $color-gray: #eaebec;
    $easing: ease-in-out;
    
    body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    
    html, body {             /* 배경색 */
      background: #f3bdff;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
    
    *, *:before, *:after {
      box-sizing: border-box;
      position: relative;
    }
    
    // dog
    .dog {
        width: $dog-width;
        height: $dog-width;
        z-index: 1;
        
        &:before {
            content: '';
            display: block;
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: rgba(black, 0.03);
            transform: translatey(-30%) scale(1.5);
        }
        
        * {
            position: absolute;
        }
    }
    
    .dog-body, .dog-head, .dog-torso {
        border-radius: 50%;
        background: white;
        position: absolute;
        width: 100%;
        height: 100%;
    }
    
    // dog-body
    .dog-body {
        top: -50%;
      box-shadow: inset 0 -15px 0 0 $color-gray;
        animation: dog-body $interval $easing infinite alternate;
        
        &:before {
            content:'';
            position: absolute;
            bottom: 90%;
            right: 50%;
            width: 35%;
            height: 35%;
            background: rgba(white, 0.4);
            border-top-left-radius: 100%;
            border-bottom-left-radius: 10%;
            border-top-right-radius: 10%;
            transform-origin: right bottom;
        animation: dog-tail-blur $interval $interval / 6 $easing infinite alternate both;
        
        @keyframes dog-tail-blur {
          0% {
            transform: rotate(0);
            opacity: 0;
          }
          50% {
            opacity: 1;
          }
          100% {
            opacity: 0;
            transform: rotate(90deg);
          }
        }
        }
        
        @keyframes dog-body {
            from {transform: translatex(-10%)}
            to {transform: translatex(10%)}
        }
    }
    
    // dog-head
    .dog-head {
        animation: dog-head $interval * 9 cubic-bezier(0.11, 0.79, 0, 0.99) infinite;
        
        @keyframes dog-head {
            0% {transform: rotate(45deg)}
            33% {transform: rotate(-45deg)}
            66% {transform: rotate(0deg)}
            100% {transform: rotate(45deg)}
        }
    }
    
    //dog-torso
    .dog-torso {
        top: -20%;
        background: white;
      box-shadow: inset 0 -15px 0 0 $color-gray;
        animation: dog-torso $interval $easing infinite alternate-reverse;
        
        @keyframes dog-torso {
            0% {transform: translatex(-5%);}
            100% {transform: tranlatex(5%);}
        }
    }
    
    // dog-eyes
    .dog-eyes {
        width: 60%;
        top: 65%;
        left: 20%;
        z-index: 1;
        
        &:before {
            content: '';
            display: block;
            width: 30px;
            height: 30px;
            border-radius: 40px;
            background: #ffc74f;
            position: absolute;
            top: -10px;
            left: -10px;
            z-index: 0;
            border: 4px solid white;
            border-left-width: 0;
            border-bottom-width: 0;
            border-top-width: 0;
            transform: rotate(-45deg)
        }
    }
    
    .dog-eye {
        width: 12px;
        height: 5px;
        border-radius: 50%;
        background: #000;
        z-index: 1;
        
        &:first-child {
            left: 0;
        }
        &:last-child {
            right: 0;
        }
    }
    
    .dog-muzzle {
        width: 58%;
        left: 20%;
        height: 50%;
        border-bottom-left-radius: 100%;
        border-bottom-right-radius: 100%;
        bottom: -15%;
        background: white;
        
        &:before, &:after {
            content: '';
            display: block;
            position: absolute;
        }
        
        &:before {          /* 입 위의 줄 설정 */
            width: 5px;
            height: 20px;
            bottom: 0;
            background: $color-gray;
            left: calc(50% - 3px);
        }
        
        &:after {
            background: black;
            width: 20px;
            height: 15px;
            bottom: 12px;
            left: calc(50% - 10px);
            border-bottom-left-radius: 60% 60%;
            border-bottom-right-radius: 60% 60%;
            border-top-left-radius: 50% 40%;
            border-top-right-radius: 50% 40%;
        }
    }
    
    // dog-ears
    .dog-ears {
        width: 40%;
        top: 25%;
        left: 30%;
    
    }
    .dog-ear {
        bottom: -10px;
        height: 40px;
        width: 40px;
        background: $color-gray;
        
        &:first-child {
            right: 100%;
            border-bottom-left-radius: 80%;
            border-top-right-radius: 80%;
            box-shadow: inset -15px 15px 0  white;
            transform: rotate(5deg);           /* 귀의 각도 설정 */
        }
        &:last-child {
            left: 100%;
            border-bottom-right-radius: 80%;
            border-top-left-radius: 80%;
            box-shadow: inset 15px 15px 0 0 white;
            transform: rotate(-5deg);
        }
    }
    
    .dog-tongue {
        width: 40%;
        height: 100%;
        left: calc(50% - 20px);
        z-index: -1;
        transform-origin: center top;
        
        &:before {
            content: '';
            position: absolute;
            left: 8px;
            display: block;
            width: 90%;
            height: 100%;
            border-radius: 40px;
            background: #ff7a7a;
            animation: dog-tongue-inner $interval / 1.4 $easing infinite alternate;
            
            @keyframes dog-tongue-inner {          /* 혓바닥 움직임 애니메이션 설정 */
                from {transform: translatey(5%)}
                to {transform: translatey(20%)}
            }
        }
    }
    
    // dog-tail
    .dog-tail {
        $tail-width: 17px;
        width: $tail-width;
        height: $tail-width * 1.1;
        bottom: 10%;
      background: white;
        border-radius: $tail-width / 2;
        left: calc(50% - #{$tail-width / 2});
        transform-origin: center bottom;
        
        .dog-tail {
            animation: dog-tail-segment $interval $easing infinite alternate;
            
            @keyframes dog-tail-segment {
                0% {transform: rotate(-10deg)}
                100% {transform: rotate(10deg)}
            }
        }
    }
    
    .dog-body > .dog-tail {
      bottom: 90%;
    }

결과보기