[HTML+CSS3] 애니메이션(2)

ODaram 2022. 10. 6. 16:08

애니메이션

트랜지션+트랜스폼 과 애니메이션의 다른점

트랜지션+트랜스폼은 시작점과 끝점만 존재한다.
애니메이션은 시작점과 중간점, 끝점이 존재한다.

애니메이션 구현 방법

1. 애니메이션 등록 : @keyframes 를 사용해서 등록한다.
@keyframes animation-name {
0% {스타일속성 : 스타일값;}
50% {스타일속성 : 스타일값;}
100% {스타일속성 : 스타일값;}
}
2. 애니메이션 적용 : animation 스타일 속성을 사용해서 적용한다.
선택자 {
animation : 애니메이션이름 진행시간 가속도 대기시간 반복횟수 방향지정;
animation : name duration timing-function delay iteration-count direction;
}

 <!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>애니메이션</title>
   <style>
       div {
         width:300px; height:300px; margin:50px 20px;
         background:gainsboro;
         /* 2. 애니메이션 적용 */
         animation : firstAni 3s ease-out infinite alternate;
       }
       /* 1. 애니메이션 등록 */
       @keyframes firstAni {
         0% {transform:translate(0,0) rotate(0deg);}
         50% {
           border-radius:50%;
           transform:translate(100px,0) rotate(90deg);
         }
         100% {transform:translate(500px,0) rotate(360deg);
         }
       }
   </style>
 </head>
 <body>
   <div></div>
 </body>
 </html>