HTML / CSS - 고급 4편

* 애니메이션(animation)

• 브라우저가 그림그리는 순서

1. Render Tree 만들기 : css 정리한 참고자료

2. Layout 잡기 : 가상의 박스를 제작 ( width, height, margin, padding ...등등)

3. Paint 하기 : 픽셀에 색칠

4. Composite 처리 : transform, opacity 등 처리

2번 속성을 변경시 2,3,4번 재실행

3번 속성을 변경시 3,4번 재실행

4번 속성을 변경시 4번 재실행

---

• transform 빠른 이유

1. transform은 다른 thread에서 처리해준다.

2. 브라우저가 그림그리는 순서는 transform을 가장 나중에 그리기 때문에 transform을 변경하면 웹의 동작속도가 빠르다.

---

• transform 세부 속성

.box {
    transform: rotate(0~360deg);
    /* 0~360도 까지 회전 */
    transform: translateX(100px);
    /* X좌표 100px 이동 */
    transform: translateY(100px);
    /* Y좌표 100px 이동 */
    transform : scale(0~...);
    /* 0~원하는 숫자까지 배율 확대 */
    /* 굉장히 많은 효과 존재 */   
}

다양한 transform 확인

https://developer.mozilla.org/ko/docs/Web/CSS/transform

---

• 다양한 애니메이션 효과

2. ANY-WAY 애니메이션

자유롭게 이동하는 애니메이션

* 박스에 마우스 오버시 좌우 이동

코딩 방법

1. 기본 틀과 스타일 적용

html

<div class="textbox">
        <h4 class="ani-text">Hello</h4>
</div>   

css

.textbox {
    width: 300px;
    height: 100px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 200px;
    background-color: bisque;
    box-sizing: border-box;
}
.ani-text {
    font-size: 30px;    
    text-align: center;
    padding-top: 25px;
}

2. 언제 애니메이션 적용할지 트리거 주기

css

.ani-text:hover {
    animation-name: moveon;
    /* moveon이라는 애니메이션을 적용한다 */
    animation-duration: 2s;
    /* 애니메이션이 한 사이클을 완료하는 데 소요 시간 : 2초 */
}

3. @keyframes 작성

css

@keyframes moveon {
    0% {
        transform: translateX(0px);
    } /* 애니메이션이 0% 진행됬을때 상태 */
    34% {
        transform: translateX(-100px);
    } /* 애니메이션이 34% 진행됬을때 상태 */
    68% {
        transform: translateX(100px);
    } /* 애니메이션이 68% 진행됬을때 상태 */
    100% {
        transform: translateX(0px);
    } /* 애니메이션이 100% 진행됬을때 상태 */
}

---

* 좌우로 흔들리는 애니메이션

코딩 방법

1. 기본 틀과 스타일 적용

html

<button class="shakeBtn">흔들버튼</button>

css

.shakeBtn {
    padding: 15px 20px;
    font-size: 20px;
    background: skyblue;
    color: white;
    border: none;
    border-radius: 5px;
    display: block;
    margin: 30px auto;
    margin-top: 100px;
}

2. 언제 애니메이션 적용할지 트리거 주기

css

.shakeBtn:hover {
    animation-name: shake;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    /* 반복실행 횟수 : 무제한 */
}

3. @keyframes 작성

css

@keyframes shake {
    0% {
        transform: rotate(0deg)
    }
    25% {
        transform: rotate(-8deg);
    }
    50% {
        transform: rotate(8deg);
    }
    75% {
        transform: rotate(-8deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

---

* 회전 + 크기 증가

코딩 방법

1. 기본 틀과 스타일 적용

html

<div class="turnBtn">+</div>

css

.turnBtn {
    margin: 150px auto;
    text-align: center;
    font-size: 70px;
    width: 84px;
    cursor: pointer;
}

2. 언제 애니메이션 적용할지 트리거 주기

css

.turnBtn:hover {
    animation-name: turn;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    /* 마지막 적용된 애니메이션 상태를 유지 */
}

3. @keyframes 작성

css

@keyframes turn {
    0% {
        transform: rotate(0deg)
    }
    25% {
        transform: rotate(-15deg);
    }
    100% {
        transform: rotate(45deg) scale(1.5);
    }
}

---

* 슬라이드 되는 메뉴

코딩 방법

1. 기본 틀과 스타일 적용

html

<nav class="menuBar">
            <h4>menu</h4>
            <p>Item</p>
</nav>

css

body {
    margin: 0;
}
.menuBar {
    width: 200px;
    background: black;
    color: white;
    height: 100%;
    padding: 25px;
    position: fixed;
    z-index: 5;
    text-align: right;
    transition: all 1s;
    transform: translateX(-150px);
}
.menuBar p {
    text-align: center;
}

2. 언제 애니메이션 적용할지 트리거 주기

css

.menuBar:hover {
    transform: translateX(0px);
    text-align: center;
}
.menuBar:hover p {
    animation-name: slide;
    animation-duration: 1s;
}

3. @keyframes 작성

css

@keyframes slide {
    0% {
        transform: translateX(-250px);
    }
    25% {
        transform: translateX(50px) skewX(-30deg);
    }
    100% {
        transform: translateX(0px);
    }
}