CSS animation

animation : 그냥 애니메이션을 주고 싶을 때!

transition  : 이미 있는 CSS 속성을 전환!

 

 

animation 속성 :

      ① animation-name
      ② animation-duration
      ③ animation-timing-function
      ④ animation-delay
      ⑤ animation-iteration-count
      ⑥ animation-direction

 

 

① animation-name: 애니메이션 이름

방법1,

@ketframes name{

      from{

         /*Rules*/  

       }

      to{

         /*Rules*/  

       }

  }

방법2,

@ketframes name{

      0%{

         /*Rules*/  

       }

      50%{

         /*Rules*/  

       }

      100%{

         /*Rules*/  

       }

  }

 

② animation-duration : 지속시간 ms , s

③ animation-timing-function : 변화속도 지정 

      ease-in│ ease-out│ ease-in-out│cubic-bezier│

④ animation-delay : 몇 초후에 animate 할 것인지 지정 ms , s

      ex) animation-delay:1000ms  = 1초후에 시작하겠다.

⑤ animation-iteration-count : 반복 횟수

      ex) animation-iteration-count: 3;   = 3번반복하겠다.   

                                            :infinite;  = 무한반복

⑥ animation-direction : 진행방향

    alternate│ reverse│

alternate는 정방향 진행한 후 역방향으로 진행, 자연스럽게 변화

               (애니메이션 횟수를 늘려야 변화 확인 쉽게 가능)

reverse는 거꾸로 진행