애니메이션 효과

움직이는 강아지 만들기

이번시간에는 CSS를 이용해서 움직이는 강아지 애니메이션를 만들어 보겠습니다.오늘 작업은 코드펜으로만 작업하였고 html소스는 Pug를 이용했고 CSS는 SCSS를 이용해서 작업했습니다.
강아지는 언제봐도 귀엽죠...💕 같이 만들어 봐요!!🐾

---

■ 그래서... Pug가 뭔가요?

Pug는 html을 조금 더 세련되게 쓸 수 있는 템플릿 언어, express 뷰 엔진입니다.
여기서 템플릿언어란 간단하게 설명하자면 자바스크립트를 사용해서 HTML을 렌더링할 수 있게 해주는 엔진에서 사용되는 언어입니다.

▶ 왜 쓰는거죠?
'<div class="dog"> 강아지 보고 가실게요</div>' 이렇게 쓰는 것을
'.dog 강아지 보고 가실게요' 처럼 쓸 수 있습니다.
너무 편하죠?사실 어느 템플릿 언어를 사용해도 무방하나 이 Pug라는 친구는 HTML+javscript의 형태로 나타나기 때문에 반복문이나 삼항연산자 같은 것들을 js로 해주지 안하도 되는게 장점이라고 하겠네요.

■ SCSS는요?

CSS를 보다 편히 사용하기 위해서 사용한다고 생각하시면 될 것 같네요. 설명을 하면 너무 길어지므로 여기선 간단하게만 설명하기로 해요.
SCSS는 CSS와 거의 같은 문법으로 Sass기능을 지원해서 쉽게 CSS를 작성하게 도와줍니다. 그리고 속성 변수는 '$속성: 속성값;'으로 표현합니다.
더 알아보기 쉬운 차이는 [](중괄호)와 ;(세미콜론)의 유무입니다.

■ CSS 속성 : box-shadow

요소의 테두리를 감싸 그림자 효과를 추가하는 속성입니다. 쉼표로 구분해서 여러 그림자 효과를 나타낼 수 있습니다.

- 문법

box-shadow( inset length length blur-raidus spread-radius color)

*inset
선택사항입니다. 이 요소를 입력하면 요소 안에 그림자가 생성됩니다.
*length
그림자의 위치를 설정하는 값입니다 x, y 구성이며 양수값으로 작성할 경우 각각 '왼쪽, 위'로 생성됩니다.음수는 당연히 '오른쪽, 아래'이겠죠?
*blur-raidus
크면 클수록 그림자 테두리가 흐려지며 색이 밝아집니다. 음수값은 사용불가능합니다. 기본값은 0입니다.
*spread-radius
양수 값은 그림자가 더 확산하고 커지며, 음수 값은 그림자가 줄어듭니다. 기본값은 0입니다.
*color
설명이 필요한가요? 그림자 색상입니다. 특이한 케이스로 Safari브라우저에서는 투명한그림자가 기본값입니다.

■ CSS 속성 : animation과 keyframes

애니메이션 효과를 위해서, 움직이게 만드는 효과를 부여하기 위한 속성입니다. 이 속성을 이용해서 @keyframes 애니메이션을 연결해야합니다. 이 속성은 아주 다양한 속성값을 가지고 있는 친군데 여기서 기술하기에는 벅차네요. 이번 글에서는 animation과 @keyframes은 반드시 서로 연결되어야만 잘 작동한다 는 점만 잘 숙지해주세요.

---

Pug 소스 분석하기

위에서 설명드렸듯이 '.dog'는 '<div class="dog">'와 같습니다.

.dog
    .dog-body
        .dog-tail
        .dog-tail
            .dog-tail
            .dog-tail
                .dog-tail
                .dog-tail
                    .dog-tail
                    .dog-tail
    .dog-torso
    .dog-head
        .dog-ears
        .dog-ear
        .dog-ear
        .dog-ear
        .dog-eyes
        .dog-eye
        .dog-eye
        .dog-muzzle
        .dog-tongue
        .dog-earline
        .dog-earliner
        .dog-earliner

SCSS 소스 분석하기

$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: #b7e3e4;
    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: 60%;
        height: 70%;
        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 {
    border-radius: 80px;
    border-top-right-radius: 200px;
    border-top-left-radius: 200px;
    box-shadow: inset -3px -4px 15px 0 $color-gray;
    
    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%;
    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: 55%;
    left: 20%;
    z-index: 1;
    
    &:before {
    content:'';
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 40px;
    background: orange;
    position: absolute;
    top: -10px;
    left: -10px;
    z-index: 0;
    border: 4px solid white;
    border-left-width: 0;
    border-top-width: 0;
    border-bottom-width: 0;
    transform: rotate(-45deg);
    
    }
}

.dog-eye {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: black;
    z-index: 1;
    
    &:first-child{
    left:0;
    }
    &:last-child {
    right:0;
    }
}

.dog-muzzle {
    width: 60%;
    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: 6px;
    height: 20px;
    left: calc(50% - 3px);
    bottom: 0;
    background: &color-gray;
    }
    
    &:after {
    background: black;
    width: 20px;
    height: 15px;
    left: calc(50% - 10px);
    bottom: 12px;
    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: 65%;
    left: 43%;
    
}
.dog-ear {
    z-index: 100;
    bottom: -20px;
    height: 40px;
    width: 50px;
    // background: $color-gray;
    background: rgba(skyblue, 0.8);
    
    &:first-child {
    right: 90%;
    border-radius: 30%;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    box-shadow: inset 1px 1px 5px 0 #8DAFAF;
    // border-top-right-radius: 40%;
    // border-bottom-right-radius: 40%;
    }
    &:nth-child(2) {
    width: 13px;
    height: 5px;
    bottom: 5px;
    background-color: rgba(gray,0.5);
    z-index: 1300;
    }
    &:last-child {
    border-radius: 30%;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    box-shadow: inset -1px 1px 5px 0 #8DAFAF;
    left: 20%;
    }
    
}

// dog-tongue 
.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: 100%;
    height: 100%;
    border-radius: 40px;
    background: #fd3163;
    animation: dog-tongue-inner $interval / 2 $easing infinite alternate;
    
    @keyframes dog-tongue-inner {
        from {transform: translatey(5%)}
        to {transform: translatey(22%)}
    }
    }
}

// dog-tail
.dog-tail {
    $tail-width: 17px;
    width: $tail-width;
    height: $tail-width * 1.1 ;
    background: white;
    bottom: 40%;
    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%;
}

// dog__earline
.dog-earline {
    width: 10%;
    top: 5%;
    left: 20%;
    z-index: 2;
    
    &:before {
    content:'';
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 40px;
    background: orange;
    position: absolute;
    top: -10px;
    left: 0px;
    z-index: 0;
    // border: 4px solid white;
    // border-left-width: ;
    // box-shadow: 10px 10px 5px 5px gray;
    box-shadow: inset -1px -1px 5px 0 #CB8534;
    transform: rotate(-45deg);
    
    }
}
.dog-earliner {
    width: 10px;
    height: 10px;
    background: green;
    left: 10px;
    top: -12px;
    z-index: 1;
    border-radius: 50%;
}

오래 기다리셨습니다. 귀여운 강아지를 볼 시간입니다...😭