CSS입문

CSS_애니메이션_22.04.13(Thu)

양빵빵 2022. 4. 14. 11:04

animation-directio
애니메이션의 반복 방향 설정

normal : 정방향만 반복 (기본값)
reverse : 역방향만 반복
alternate : 정방향에서 역방향으로 반복(왕복)
alternate-reverse : 역방향에서 정방향으로 반복(왕복)

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background: tomato;
            margin: 30px;

            animation: rotation 10s linear infinite;        
            animation-direction: alternate-reverse;
            /*
            normal : 0% ~ 100%로 움직인다.
            reverse: 100% ~ 0%로 움직인다.
            alternate: 0% ~ 100% 움직인후 100%~0%로 움직임 *반복횟수가 2이상이어야 작동됨.
            alternate-reverse : 100% ~ 0% ~ 100%로 움직임. */

        }

        @keyframes rotation {
            0%{ transform: translate(0,0); }
            25%{ transform: translate(100px,0); }
            50%{ transform: translate(100px,100px); }
            75%{ transform: translate(0,100px); }
            100% {transform: translate(0,0); }
        }

    </style>
   
</head>
<body>
    <div class="box"></div>
</body>
</html>