20230722 [CSS] @keyframes

@keyframes

개발자가 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정함으로써 CSS 애니메이션 과정의 중간 절차를 제어할 수 있게 한다. 이 룰은 브라우저가 자동으로 애니메이션을 처리하는 것보다 더 세밀하게 중간 동작들을 제어할 수 있다.

적용해보기

@keyframes jelly {
  25% {
    transform: scale(0.9, 1.1);
  }

  50% {
    transform: scale(1.1, 0.9);
  }

  75% {
    transform: scale(0.95, 1.05);
  }
}

jelly라는 이름의 애니메이션은 버튼에 마우스 포인터를 올렸을 때 발동한다. 이 애니메이션은 버튼이 작아졌다가 커졌다가 하는 효과를 만든다. 각 keyframe에서 transform 속성을 사용하여 버튼의 크기를 변경하고, 각 keyframe이 발생하는 시점에 따라 버튼이 변화한다.

애니메이션의 25% 시점에서 버튼은 가로로 0.9배, 세로로 1.1배로 크기가 변경된다. 50% 시점에서는 가로로 1.1배, 세로로 0.9배로 크기가 변경되며, 75% 시점에서는 가로로 0.95배, 세로로 1.05배로 크기가 변경된다. 이러한 변화가 부드럽게 이어져서 애니메이션이 구현된다.

jelly 애니메이션은 버튼에 마우스를 올리면 &:hover를 통해 적용된다.

&:hover {
  animation: jelly 0.5s;
}