animation

animation
      1. 선언 
         A. @keyframes name(애니메이션 로직의 이름){
               from {
                   / 처음에 동작할 CSS 코드
                }

                to{
                   / 마지막의 CSS 코드
                 }

          B.  @keyframes name(애니메이션 로직의 이름){
               0% {
                   / 처음에 동작할 CSS 코드
                }

                50%{ // 꼭 50%가 아니여도 상관 X
                  
                }

                100%{
                   / 마지막의 CSS 코드
                 }

         2. 적용
              .classname{
                   ...
                  animation-name : name(위에서 작성한 애니메이션 이름 작성)
                  animation-duration : 2000ms(2초간 애니메이션 지속)
                  animation-timing-function : ease-in-out(애니메이션 속도)
                  animation-delay : 1000ms; (1초 후 애니메이션 작동)
                  animation-iteration-count : 3(애니메이션 3번 반복)
                       - 계속 반복시키고 싶다면 infinite 작성(정수나 infinite 들어갈 수 있음)
                  animation-direction : alternate (애니메이션 종료된 이후 반복될 때 진행하는 방향)
                       - normal : from - to 방향으로 진행
                       - reverse : to - from 방향 진행
                       - alternate : 홀수번째는 normal, 짝수번째는 reverse로 진행



            ex)
               @keyframes movebox{
                      from {
                          ...
                        }

                      to{
                         ...
                        }
                     }

               .box{
                    animation-name : movebox; // .box인 태그에 movebox 애니메이션 부여