🔸 Keyframe 알아보기

    <div class="box"></div>
    <ul class="progress">
        <li></li>
    </ul>

/* 브라우저 구분 없이 표준방식은 w3c에서 권고 */
@keyframes{}
/* 벤더프리픽스 : 브라우저 제조사를 구분하는 코드로,
브라우저마다 속성을 처리하는 방식이 달라 각 브라우저에 맞는 속성을
별도로 작성해야 합니다. */
/* Opera사의 Opera브라우저 대부분 모바일전용 브라우저 */
@-o-keyframes{}
/* Micro Soft사의 IE */
@-ms-keyfrmes{}
/* Mozilla사의 Fire Fox */
@-moz-keyframes{}
/* webkit엔진 기반으로 만들어진 브라우저, 크롬, 사파리, 엣지 등 */
@-webkit-keyframes{}

@keyframes myAni{
    0%{
        width: 200px;
        height: 200px;
        transform: rotate(0deg);
    }
    50%{
        width: 400px;
        height: 400px;
        transform: rotate(720deg);
    }
    100%{
        width: 200px;
        height: 200px;
        transform: rotate(0deg);
    }
}

.box{
    width: 200px; height: 200px;
    background-color: #f90;
    transition-property: width, background-color;
    transition-duration: 0.3s;
    /* 구성된 키프레임의 이름 */
    /* animation-name: myAni; */
    /* 키프레임이 작동되는 시간 */
    animation-duration: 3s;
    /* 키프레임의 반복 횟수 */
    animation-iteration-count: infinite;
    /* animation: name duration timing-function delay iteration-count direction fill-mode; */
    animation-play-state: paused;

}
.box:hover{
    width: 400px;
}
.box:active{
    background-color: #f00;
}
.progress{
    padding: 0;
    margin: 0;
    list-style: none;
    width: 600px;
    background-color: #ccc;
} 
.progress li{
    width: 0%;
    height: 30px;
    background-color: #f60;
    border-radius: 20px;
    border: 4px solid #ccc;
    box-sizing: border-box;
    animation-name: myProg;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    /* linear(일정한속도) | ease-in(가속) | ease-out(감속) |*/
    animation-timing-function: cubic-bezier(0,1.17,1,.39);
}
@keyframes myProg{
    0%{
        width: 0%;
    }
    100%{
        width: 90%;
    }
}