CSS - 애니메이션 속성

아래와 같은 애니메이션을 만들 것이다.

 

 

 

 <div id="wrap">
        <div id="rec">rec</div>
        <div id="cir">cir</div>
    </div>

 

wrap 안에 rec 와 cir 이 있다.

 

 

 

<style>

        * { margin:0; padding:0; }
        
        #wrap { position:relative; }
        #wrap #rec { 
            background-color:#ffff00;
            width:100px; height:100px; line-height:100px; text-align:center;

            animation-name:ani1;
            animation-duration:2s;
            animation-timing-function:ease-in;
        }

        @keyframes ani1 {
            from { width:100px; }
            to { width:500px; }
        }

        #wrap #cir { 
            background-color:#ff00ff;
            width:100px; height:100px; position:absolute; left:0; top:110px;
            line-height:100px; text-align:center; border-radius:100px;

            animation-name:ani2;
            animation-duration:2s;
            animation-timing-function:ease-in;
        }

        @keyframes ani2 {
            from { left:0px; top:110px; 
                   transform:rotate(0deg); }
            to { left:500px; top:610px; 
                 transform:rotate(40deg); }
        }

    </style>

 

wrap 에다가 position: relative 로 지정한 까닭은 -> cir 이 position: absolute 로 지정해주기 위함이다.

2021.09.21 - [html , css] - CSS - 수직 가운데 정렬, position 속성

 

애니메이션 속성을 지정하려면 @keyframes 이름 이렇게 써야 한다.

 

 

 

 

 

 

 

 

 

 

 

 

이번엔 이런 애니메이션을 만들어 볼 것이다.

 

<div id="wrap">
        <div id="lnb">
            <ul>
                <li><a href="#none">lnb01 </a></li>
                <li><a href="#none">lnb02 </a></li>
                <li><a href="#none">lnb03 </a></li>
                <li><a href="#none">lnb04 </a></li>
                <li><a href="#none">lnb05 </a></li>
            </ul>
        </div>

        <br />

        <div id="rec"> rec </div>
    </div>

 

전체는 wrap 으로 감싸고 있고, 그 안에 lnb 와 rec 가 존재한다.

 

 

<style>

        * { margin:0; padding:0; }
        li { list-style:none; }

        #wrap { width:1000px; margin:0 auto; position:relative; }
        #wrap #lnb { width:250px; background-color:#cccccc; }
        #wrap #lnb ul {  }
        #wrap #lnb ul li a { width:100px; height:50px; line-height:50px; border-radius:10px; margin-top:2px;
                             padding:10px 25px; background-color:#ffd800; display:block; color:#ffffff;
                             font-weight:bold; }
        #wrap #lnb ul li a:hover { 
            animation-name:ani;
            animation-duration:2s;
            animation-iteration-count:infinite;
        }

        @keyframes ani {
            from { width:100px; }
            to { width:200px; background-color:#a08a10; }
        }

        #wrap #rec { position:absolute; width:100px; height:100px; line-height:100px; border-radius:10px; text-align:center; background-color:#ffff00; left:0;
                     animation-name:rec_ani;
                     animation-duration:2s;
                     animation-iteration-count:infinite;
                     animation-direction:alternate;
        }

         #wrap #rec:hover { animation-play-state:paused; }

        @keyframes rec_ani {
            from { width:100px; left:0; transform:rotate(0deg); }
            to { width:200px; height:200px; border-radius:100px; line-height:200px; background-color:#a08a10; left:500px; transform:rotate(360deg); font-size:4em; }
        }

    </style>

 

 

animation-direction : alternate

-> 역방향으로도 진행할 수 있게 한다. 이 속성을 지정한하면 원이 왔다갔다 움직이지 않는다. 시작지점에서만 반복할 뿐이다.