CSS: Transition, Animation

바뀌는 요소에 지정

Transition

• property: 어떤 속성을 바꿀 것인지.
• duration: 1000ms=1s 얼마나 지속되는지.
• [timing-function]: ease-in, ease-out, ease-in-out, cubic-bezier()
• [delay]: 시작 지연시간 설정. delay 값 이후 변화 시작

transition: font-size 2500ms ease-in 1000ms, background-color 1000ms ease-out 1200ms;

Animation:

• transition보다 자유도가 큼
• animation-name: @keyframes를 통해 만든 애니메이션의 이름
• animation-duration: ms, s 사용가능
• animation-timing-function: transition 때와 같음.
• animation-delay: ms, s 사용가능
• animation-iteration-count: 반복 횟수. e.g., 3; 5; infinite;
• animation-direction: 방향.
  -- reverse; 로 설정하면 to에서 from으로 돌아감.
  -- alternate; 로 설정하면 from - to - from - to... 순으로 진행.

animation을 줄 때 keyframes을 활용해서 어떤 것을 줄 지 알려줘야함.

@keyframes name {
  from {
    /* Rules */
  }

  to {
    /* Rules */
  }
}

혹은 from, to 대신 %를 써도 됨.

@keyframes name {
  10% {
    /* Rules */
  }

  90% {
    /* Rules */
  }
}