[Visual Studio Code] 애니메이션 반복하기

zenghyun 2022. 11. 7. 14:00

애니메이션을 반복하는 코드를 짜 보자

test.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>keyframes</title>
 
    <style>
       * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
        }
        .box {width: 200px; height: 200px; 
             background-color: darkcyan;
             border: 1px solid black;
        }
        @keyframes bgcolor {
            20% { background-color: red;}            
            50% { background-color: blue;}            
            70% { background-color: orange;}            
            100% { background-color: pink;}            
        }
        /* 애니메이션이 되는 시작과 끝점의 색 지정 
            20 ~ 50
            50 ~ 70
            70 ~ 100
        */
        @keyframes tofrom {
            from { background-color: orange; left:0px;}
            to {background-color: green; left:200px;}
            
        }
             .box1{ 
                    animation: bgcolor   3s    infinite;
                    /*           이름  동작시간 반복횟수 */
                    margin-bottom: 50px;
            }
             .box2{ 
                    animation: tofrom 3s infinite;
                    position: relative;
            }
            /* 애니메이션이 끝나면 0% 지점으로 돌아간다. */
    </style>
</head>
<body>
    <h1> bgcolor: red -> blue -> orange -> pink</h1>
    <div class="box box1"></div>
    <h1>tofrom: orange -> green</h1>
    <div class="box box2"></div>
</body>
</html>

결과

keyframes

bgcolor: red -> blue -> orange -> pink