본문 바로가기
Html&CSS/html5&css3

0227_html5/css3_animation-2

by .Epona. 2020. 3. 4.
0227_css3_animation-2

[ animation ] 애니매이션:반복적인 패턴의 움직임

- animation은 반드시 @keyframes과 같이 써야함

animation

 

 

코드 보기 [더보기] 선택

더보기
<!DOCTYPE html>
    <html lang="ko">
    <head>
    <meta  charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>0227_css3_움직여욥-</title>
    <meta name="robots" content="noindex, nofollow" />
    <meta name="keywords" content="-" />
    <meta name="description" content="-"/>
    <meta name="author" content="-"/>

 <style>
     div{font-size:20px; font-weight:800; margin-bottom: 30px;}
     
/* [ animation ]     */
     .animation{width: 100px; height: 100px; 
        background-color: darkblue;
        animation-name: animation;  /* @keyframes에서 지정한 이름*/
        animation-duration:4s;  /*소요 시간 지정 */
        animation-iteration-count: 3; /*반복 횟수 지정 */    
     }
     
     
     .animation{width: 100px; height: 100px; 
        position: relative; /**/
        background-color: darkblue;
        animation-name: animation;  /* @keyframes에서 지정한 이름*/
        animation-duration:4s;  /*소요 시간 지정 */
        animation-iteration-count: 3; /*반복 횟수 지정 */    
     }
        
     
     @keyframes animation{
       /*  from{background-color: darkblue}
         to{background-color: lightblue }*/
         0%{left:0px; top:0px}
         25%{left: 300px; top: 0px; }
         50%{left: 300px; top: 300px;}
         75%{left: 0px; top: 300px; }
         100%{left: 0px; top: 0px;}
         
     }
     
 </style>         
</head>

        
<body>
<h3> [ animation ] 애니매이션:반복적인 패턴의 움직임</h3>
    <h4>- animation은 반드시 @keyframes과 같이 써야함</h4>
    <div class="animation">animation </div>
</body>
</html>

 

EX_html5_0227_animation-2.html
0.00MB