CSS 10차시

# Animation - Spinner

<h1>Spinner</h1>
    <style>
        #spinner {
            width: 50px;
            height: 50px;
            border: 5px solid;
            border-top: 5px solid transparent;     // 스타일은 아랫줄이 더 우선시 된다.
            border-radius: 50%;

            animation-name: spin;     // 애니메이션의 이름
            animation-duration: 1.5s;     // 애니메이션이 1번 작동하는데 걸리는 시간
            animation-iteration-count: infinite;      // 애니메이션 반복 횟수 - infinite(무한)

            animation-timing-function: linear;     // 애니메이션의 속도 조절 효과

            // linear(일정하게), ease(시작은 빠르게, 끝은 느리게/ 기본값), cubic-bezier(0,0,0,0)(시작과 끝의 속도를 조절)
        }

        @keyframes spin{     // 애니메이션 정의
            from {
                transform: rotate(0deg);
            }to {
                transform: rotate(360deg);
            }
        }
    </style>

    <div id="spinner"></div>

 

---

# Animation: progress bar

<h1>Progress Bar</h1>

    <style>
        .container {
            width: 200px;
            height: 5px;
            background-color: #ddd
        }
        .item {
            width: auto;
            height: 100%;
            background-color: #000;

            /* 필수 */
            animation-name: fill;
            animation-duration: 2s;
            /* 옵션 */
            animation-iteration-count: 1;
            animation-timing-function: ease;
        }
        @keyframes fill {
            from {
                width: 0;
            } to {
                width: 100%;
            }
        }
    </style>

    <div class="container">
        <div class="item"></div>
    </div>

---

# Animation: Menu button

<h1>Menu button</h1>

    <style>
        .bars{
            width: 50px;
            height: 20px;
            display: inline-flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .bar{
            width: 50px;
            height: 4px;
            background-color: #000;
            transition: 0.2s;
        }
        .bars:hover .bar:first-child {
            transform: translateY(8px) rotate(45deg);
            // translateX / translate Y: X축 혹은 Y축을 지정한 만큼 이동시키는것
        }
        .bars:hover .bar:last-child {
            transform: translateY(-8px) rotate(-45deg);
        }
    </style>

    <div class="bars">
        <div class="bar"></div>
        <div class="bar"></div>
    </div>

---

# Animation: sound icon

<style>
        body {
            background-color: #222;
            height: 100vh;     // vh: viewport 대비 height 비율
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .container {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .item {
            width: 25px;
            height: 50px;
            background-color: #fff;

            animation-name: wave;
            animation-duration: 0.3s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
            animation-direction: alternate;    // 애니메이션의 작동방향 - alternate (form과 to가 번갈아가며 바뀜)
        }
        .item:nth-child(1) {
            /* 기본값 */ 
            animation-delay: 0s;     // 애니메이션의 시작 시간
        }
        .item:nth-child(2) {
            animation-delay: 0.1s;
        }
        .item:last-child {
            animation-delay: 0.2s;
        }
        @keyframes wave {
            from {
                height: 50px;
            } to {
                height: 150px;
            }
        }
    </style>

    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>