1.Animation

transition은 user의 action(ex. hover) 이 있어야 효과를 보는 것이지만 animation은 요소가 계속 변할 수 있는 하나의 세트를 만들수있다 (다수의 스타일 변화를 자동으로 재생될 수 있게 해준다 )

• 단축 속성이다
• keyframe 이라는 세트를 만들어서 animation name으로 불러서 사용이 가능하다

ex) keyframs 세트로 작성된 예시

 .cylon_eye {
   background-color: red;
   background-image: linear-gradient(to right,
       rgba(0, 0, 0, .9) 25%,
       rgba(0, 0, 0, .1) 50%,
       rgba(0, 0, 0, .9) 75%);
   color: white;
   height: 100%;
   width: 20%;
     -webkit-animation: 4s linear 0s infinite alternate move_eye;
             animation: 4s linear 0s infinite alternate move_eye;
   }

아래 처럼 작성된 move eye라는 keyframs를 불러와서 사용하는 것이다

   @-webkit-keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }
            @keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }

keyframes

• 개발자가 애니메이션 중간중간 특정 지점들을 거칠 수 있는 프레임들을 설정함으로써 애니메이션의 중간 절차를 제어할 수 있게 한다

• 브라우저가 자동으로 애니메이션을 처리하는 것 보다 더 세밀하게 중간 동작을 제어

• @keyframes 라는 키워드를 사용하여 작성하면된다

    /*두가지 만 적용 했을 때 예시*/
    /* @keyframes +이름 */
   @keyframes slidein {
     from {
       margin-left: 100%;
       width: 300%;
     }
  
     to {
       margin-left: 0%;
       width: 100%;
     }
   }

• 여기 top (en-US) 속성은 0%, 30%, 100% 키 프레임을 이용하여 애니메이션 됩니다. left (en-US) 속성은 0%, 68%, 100% 키 프레임을 사용합니다.

	@keyframes identifier {
        0% { top: 0; left: 0; } /* 0 , 0으로시작해서 */
        30% { top: 50px; } /*3초에는 이 동작*/ 
        68%, 72% { left: 50px; }/*6.8초 그리고 7.2초에는 이동작*/
        100% { top: 100px; left: 100%; } /*끝날 때 동작*/
      }

animation-name

• 미리 작성해 놓은 keyframs 이름을 작성해주면된다 .

• name 대소문자를 구분한다 , 0~9 , a-z ,_, - 만 섞어서 사용이 가능하다

• global로 적용되어있는 값들을 이름으로 사용해서는 안된다

  /* Global values */
     animation-name: initial;
     animation-name: inherit;
     animation-name: revert;
     animation-name: unset;

  animation-name: slide; /사용자가 지정해둔 slide 라는 keyframs/

animation-duration

• 몇 동안에 재생되서 동작할건지를 정의하는 것

• 계속 반복적으로 재생할 수 있기 때문에 keyframs 하나를 한 사이클로 본다

• delay 는 음수값을 허용하지만 duration은 0 이상의 양수 시간을 작성해줘야한다

/* Single animation */
animation-duration: 6s;
animation-duration: 120ms;

/* Multiple animations */
animation-duration: 1.64s, 15.22s;
animation-duration: 10s, 35s, 230ms;

animation-delay

• 시작하고 나서 한 사이클을 재생하는데 약간의 지연 시간을 줄 수 있는데 그것을 얼마나 지정할것이 사용하는 프로퍼티이다

/* Single animation */
animation-delay: 3s;
animation-delay: 0s;
animation-delay: -1500ms;

/* Multiple animations */
animation-delay: 2.1s, 480ms;

• 양수 값은 지정된 시간이 경과한 후 애니메이션이 시작되어야 함을 의미 기본값이 0인 애니메이션이 적용되는 즉시 시작해야함을 의미

• 만약 음수 -1s 로 음수 값을 지정하면 애니메이션이 즉시 시작되지만 재생되는 시점이 애니메이션 시퀀스의 1초 부터 시작하게된다

animation-timing-function

• trasition과 동일하다
• 사용가능한 여러가지 value 들은 여기서 확인하자

🚨 여러 value들과 동작하는 모습까지 확인 가능!
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function

animation-interation-count

• 반복횟수라고 해석하면된다
• 재생횟수를 조정할수 있다
• transiton은 한번만 할수있어서 transition에는 적용할 수 없는 개념

values

• infinite : 무한 반복
• number : 1 -> 한번만 반복

animation-direction

• transition 은 a -> b 단방향으로 지정되어있는데 애니메이션은 keyframs을 제작해 두고 다양한 방향으로 지정 가능하다

animation-direction : alternate-reverse;

values

• noremal : 애니메이션 사이클마다 정방향으로 재생 순환할 때 마다 시작상태로 설정 다시 시작 이게 기본값이다

• reverse : 매 사이클마다 역방향으로 재생

• alternate : 매 사이클 마다 각 주기의 방향을 뒤집고 첫 번째 반복은 정방향으로 진행

• alternate-reverse : 매 사이클마다 각 주기의 방향을 뒤집으며, 첫번째 반복은 역방향으로 진행

animation-play-state

• 사용 가능한 값이 2개 뿐이다
• 애니메이션 효과일 일시정지 하거나 러닝할수있도록 할수있음

animation-play-state : paused;

values

• running : 재생되고 있는 상태가 된다

• paused : 애니메이션이 정지되는 상태

animation-fill-mode

• 애니메이션이 실행 전과 후에 대상에 스타일을 적용하는 방법을 지정

values

• none : keyframs 에 적용한 스타일 말고 자기가 원래 가지고 있는 스타일만 적용하라

• forwards : keyframs 실행된 마지막 모습으로 유지해라

• backwards : 지연시간일때 keyframs들을 가지고 미리 준비해라

👌 여기서 동작을 한 번 비교해보자
https://developer.mozilla.org/ko/docs/Web/CSS/animation-fill-mode

animation (단축속성 ver)

• 설정되있는 초기값들은 이러하다
• animation name을 맨 뒤에 적는다
• 시간의 항목이 2개인데 앞쪽이 duration 뒤쪽이 delay 이다

• animation-name (en-US): none
• animation-duration: 0s
• animation-timing-function (en-US): ease
• animation-delay: 0s
• animation-iteration-count (en-US): 1
• animation-direction: normal
• animation-fill-mode: none
• animation-play-state (en-US): running

사용 예시

/* @keyframes duration | timing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;

/* @keyframes duration | timing-function | delay | name */
animation: 3s linear 1s slidein;

/* @keyframes duration | name */
animation: 3s slidein;