animation

animation-fill-mode

animation-fill-mode의 forwards를 알아보던 도중 정리해본건

참고로, forwards는 애니메이션 시작시 애니메이션의 마지막 시점의 css를 유지하기위한 prop이다.

애니메이션 시작시 애니메이션의 처음 값을 유지한다. 만약, delay가 적용되었다면 delay동안 처음값을 유지한다! 와와왕!!! 이걸 알아내다니 대단한걸

div {
    animation-name: rgy; /* 애니메이션 이름 */
    animation-duration: 5s; /* 재생 시간 (실행속도) */
    animation-timing-function: ease-in; /* 속도곡선타입 */
    animation-delay: 1s; /* 딜레이 시간 */ --> 지금 같은경우 1초 있다가 애니메이션이 시작됨. 만약 -1s면 원래 애니메이션시작에서 1초뒤의 시점부터 시작
    animation-iteration-count: infinite; /* 반복 횟수 */
    animation-direction: alternate; /* 진행 방향 */
    animation-fill-mode: forwards; /* 종료 후 위치 */
    animation-play-state: paused; /* 실행 or 정지 */
}

div {
    animation: rgy 5s ease-in 1s infinite alternate forwards paused;
}

name > duration > timing-function > delay > count > direction > fill-mode > play-state
에니메이션 이름 > 재생 시간(실행 속도) > 속도 곡선 타입 > 딜레이 시간 > 반복 횟수 > 진행 방향 > 종료 후 위치 > 실행or정지

두 글자가 번갈아가면서 무한으로 나오게 하는 애니메이션(위의 내용을 적용해서 구현)

  mainLogoAppear: "fade 2.5s both ease-in-out infinite alternate-reverse",
  mainLogoDisappear: "fade 2.5s both ease-in-out infinite alternate",


  fade: {
    "0%": {
      opacity: 0,
      transform: "translateY(0px)",
    },
    "50%": {
      opacity: 0,
      transform: "translateY(10px)",
    },
    "100%": {
      opacity: 1,
      transform: "translateY(20px)",
    },
  },

step

서서히 가 아닌 어떤 breakpoint처럼 딱딱 끊겨서 애니메이션이 재생되게 하고 싶다면 step time-function을 쓰자.

깜빡이는 버튼을 만들고자 사용한 prop이다

참고: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function