CSS 키프레임 썸네일 이미지

CSS 키프레임으로 애니메이션 효과 만들기 방법

by
CSS 키프레임

CSS 키프레임으로 애니메이션 효과 만들기 방법을 알려드리겠습니다. 정적인 웹사이트 보다 동적인 움직임이 있는 사이트가 더욱 사용자의 눈길을 끌게 합니다. javascript 같은 타사 라이브러리에 의존하지 않아도 자연스럽고 시각적인 효과를 만들어 낼 수 있습니다. CSS 키프레임이 어떤 것인지, 어떻게 작동하는지 기본기에 대해 정리해 보겠습니다.

CSS 키프레임이란?

css 키프레임은 애니메이션 효과를 만들 때 특정한 지점에서 요소에 적용되는 스타일 순서를 정의하는 역할을 합니다. 시간에 따른 요소 표시, 크기 조정, 이동 등의 다양한 변형을 제어할 수 있습니다.

css 코드로는 아래와 같이 표기합니다.

@keyframes를 선언하면 애니메이션 단계를 정의하겠단 뜻이며, (0%, 50%, 100%)는 움직임의 타임라인을 의미합니다. 

@keyframes slide {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}

CSS 키프레임으로 애니메이션 만드는 방법

키프레임으로 애니메이션을 만드는 기본적인 방법을 설명하겠습니다.

키프레임 정의하기

예를 들어, 페이드인(fade in) 효과를 만들려고 하면 키프레임을 선언하고 효과 단계를 만들어 줍니다.

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

요소에 애니메이션 적용

요소에 애니메이션을 적용하기 위해서는 키프레임을 html 요소에 연결해줘야 하는데 이때, ‘animation’ 속성을 사용해서 할 수 있습니다.

  • html
<div class="fade-box">Hello, World!</div>
  • css
.fade-box {
  animation: fadeIn 2s ease-in-out;
}

CSS 키프레임 애니메이션 종류

키프레임 애니메이션을 만들 때 여러 가지 종류가 있지만 그중에 대중적으로 사용되는 5가지를 정리해 보았으니 참고하시기 바랍니다.

1. 바운스

말 그대로 통통 튀는 듯한 효과를 바운스라고 하며, 버튼이나 아이콘 등에 사용합니다.

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

.bounce {
  animation: bounce 1s infinite;
}

2. 회전

빙글빙글 돌아가는 효과로 스피너나 애니메이션 아이콘에 사용하는 효과입니다.

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.rotate {
  animation: rotate 2s linear infinite;
}

3. 펄스(강조)

어떤 요소를 강조할 때 펄스 효과를 사용하며 클릭을 유도하거나 버튼에 활용할 수 있습니다.

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.pulse {
  animation: pulse 1s ease-in-out infinite;
}

4. 슬라이드

요소를 이동시키는 역할로 페이지 헤더나 배너 등에 자주 사용하는 효과입니다.

@keyframes slideIn {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

.slide-in {
  animation: slideIn 1s ease-out;
}

5. 타이핑 텍스트

타이핑을 하는 것처럼 텍스트가 나타나는 효과로 랜딩 페이지나 상세 페이지 글에 활용될 수 있습니다.

.typing {
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid black;
  width: 0;
  animation: typing 3s steps(20) forwards, blink 0.7s step-end infinite;
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

CSS 애니메이션 사용법

애니메이션 종류상세 설명예시
이름키프레임 이름을 지정합니다.fadein;
기간애니메이션 지속 시간을 정합니다.2s;
타이밍 기능속도를 제어합니다.function: ease;
지연 시간애니메이션 시작 전 시간을 추가합니다.1s;
반복 횟수애니메이션 반복 횟수를 지정합니다.infinite;
방향어느 방향으로 재생되는지 지정합니다.alternate;

CSS 키프레임 애니메이션 FAQ

css 애니메이션으로 자바를 대신할 수 있나요?

css 애니메이션은 간단한 효과까지만 가능하고 좀 더 큰 프로젝트나 화려한 효과가 필요한 경우는 Javascript를 사용해야합니다.

움직이는 애니메이션을 중지하려면 어떤 코드를 쓰나요?

css 애니메이션을 중단할 때 ‘animation-play-stat: paused;’라고 쓰면 중단할 수 있습니다.

모바일에서도 효과가 잘 나타나나요?

네 맞습니다. 너무 무겁게 사용하지만 않는다면 모바일에서도 이상 없이 움직임을 볼 수 있습니다.

결론

웹 사이트의 꽃이라고 볼 수 있는 움직임 효과는 css 키프레임 애니메이션을 통해 생각보다 쉽게 구현할 수 있습니다. 버튼, 배너, 기타 효과 등 디자인을 할 때 조금씩 활용해 주면 보다 매력적인 웹사이트를 만들어 낼 수 있습니다.

Leave a Comment