CSS 애니메이션 Animation, Keyframes 사용하기

CSS 애니메이션이란 각 요소들을 CSS만으로 스타일을 다른 스타일로 부드러운 전환을 시켜주는 걸 말합니다. 애니메이션(Animation)은 키프레임들(Keyframes)로 구성이 되어집니다. 자바스크립트 없이 CSS만으로도 부드러운 전환을 시킬수 있는게 애니메이션의 장점입니다. 다만 분명한 한계는 있습니다.

Animation 속성

animation: name duration timing-function delay iteration-count direction fill-mode;

animation 속성입니다. 이 각각의 속성들은 단일 속성으로도 사용이 가능합니다.

animation-name: 동작할 애니메이션(keyframes)
animation-duration: 애니메이션 지속 시간;
animation-timing-function: 지속 시간의 흐르는 속도(ex)ease-in-out);
animation-delay: 애니메이션 시작까지의 딜레이;
animation-iteration-count: 애니메이션 반복 횟수 (infinite으로 루프 가능);
animation-direction: 종료 후 처음 부터 시작할지, 반대로 진행할지 설정 ;
animation-fill-mode: 애니메이션 실행 전과 후에 스타일 지정 (ex)forwards 애니메이션 후 상태로 스타일 지속;

Animation 사용하기

@keyframes hideSplashScreenIcon {
  0% {
    transform: none;
  }

  25% {
    transform: scale(2);
  }

  50% {
    transform: scale(1.7);
  }

  75% {
    transform: scale(2.1);
  }

  100% {
    transform: none;
  }
}

#splash-screen i {
  animation: hideSplashScreenIcon 1.9s ease-in-out;
}

@keyframes는 요소가 어떻게 동작을 할 지를 만들어줍니다. hideSplashScreenIcon은 애니메이션 이름 속성에 들어갑니다. 해당 애니메이션의 경우 0%, 25%, 50%, 75%, 100% 이렇게 나눠줬지만 해당 섹션은 설정하기 나름이라 제한은 없습니다. 애니메이션 속성값은 이름과 지속시간과 타임 함수 설정입니다.

애니메이션을 지정하는거 자체는 그리 어렵지는 않으나 애니메이션을 맛깔나게 만드는 작업이 더 어렵다고 생각됩니다. 하지만 CSS 애니메이션은 이미 맛깔나게 만들어놓은 것들이 많기 때문에 코드를 가져다 쓰시면됩니다.

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

animation: fadeOut 0.3s linear forwards;

단순한 키프레임의 경우에는 from, to 시작과 끝 지점만 지정할 수 도 있습니다. forwards 설정을 할경우 키프레임의 끝인 opacitiy: 0 속성을 유지할 수 있게 됩니다.

@keyframes notificationAnimation {
  0% {
    transform: none;
  }

  50% {
    transform: translateY(-10px) rotatey(360deg);
  }

  100% {
    transform: none;
  }
}

@keyframes flip-horizontal-bottom {
  0% {
    transform: rotateX(0);
  }
  100% {
    transform: rotateX(360deg);
    opacity: 1;
  }
}

@keyframes scale-up-center {
  0% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes slide-fwd-center {
  0% {
    transform: translateZ(0);
  }
  100% {
    transform: translateZ(160px);
  }
}

@keyframes slide-top {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0px);
  }
}

Animista

Animista is a place where you can play with a collection of ready to use CSS animations, tweak them and download only those you will actually use.

animista.net