🔵 CSS - Keyframe

jea_i·2022년 2월 7일
<body>
    <h2>Keyframe 알아보기</h2>
    <div class="box"></div>
    <ul class="progress">
        <li></li>
    </ul>
</body>

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


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



.box{
    width: 300px; height: 300px;
    background-color: #99f;
    transition-property: width, background-color;
    transition-duration: 0.3s;
    /* 구성된 키프레임의 이름 */
    animation-name: myAni;
    /* 키프레임이 작동되는 시간 */
    animation-duration: 3s;
    /* 키프레임의 반복 횟수 , infinite; 무한반복*/
    animation-iteration-count: infinite;
    /* 일시정지 */
    animation-play-state: paused;
}
.box:hover{
    width: 400px;
}
.box:active{
    background-color: #f00;
}

@keyframes myProg{
    0%{
        width: 0%;
    }
    100%{
        width: 90%;
    }
}
.progress{
    padding: 0; margin: 0; list-style: none;
    width: 600px;
    background-color: #ccc;
    border-radius: 10px;
}
.progress li{
    width: 1000%;
    height: 30px;
    background-color: #f60;
    border-radius: 20px;
    border: 4px solid #ccc;
    box-sizing: border-box;
    animation-name: myProg;
    animation-duration: 3s;
    /* 100%간 다음 정지 */
    animation-fill-mode: forwards;
    /* linear(속도일정) | ease-in(가속) | ease-out(감속) */
    //animation-timing-function: cubic-bezier(0,2.03,1,-0.65);
}
</style>
jea_i
열정열정열정🔥
이전 포스트
🔵 CSS - pseudoClass

다음 포스트
🔵 CSS - Keyframe

🔵 CSS - pseudoClass

🟢 반응형- 반응형이란?

0개의 댓글

관련 채용 정보
