CSS를 사용하여 튀는 SVG 아이콘을 애니메이션으로 만드는 방법

오늘은 CSS 애니메이션을 사용하여 SVG 화살표 아이콘을 위아래로 바운스하는 방법을 배웁니다. 또한 많은 CSS 애니메이션 속성 중 일부를 사용하여 애니메이션 유형, 타이밍 및 지속 시간을 조정하는 방법을 배우게 됩니다.

이것이 왜 유용한가요?

애니메이션이 제대로 수행되면 다음을 수행할 수 있습니다.

사용자 안내
사용자의 행동 유도
사용자의 관심을 사로잡으세요(아직 관심을 갖고 있을 때).

요구사항

따라 하려면 텍스트 편집기가 필요합니다. 자체 개발 환경이 없다면 CodePen을 추천합니다. 바로 코딩을 시작할 수 있습니다.

자, 시작하겠습니다!

<시간>

HTML:컨테이너 및 화살표 추가

데모 예제를 다시 만들려면 4개의 HTML 요소가 필요합니다.

화살표 아이콘의 이미지 요소
화살표 위의 텍스트 레이블에 대한 범위 요소
화살표 및 텍스트 레이블을 감싸는 컨테이너 바닥글 요소
모든 요소를 감싸는 컨테이너 요소

HTML 편집기로 이동하여 <body></body> 안에 다음 마크업을 추가합니다. 요소:

<div class="container">
  <div class="container-footer">
    <span class="text-label">Explore</span>
    <svg
      class="arrow-circle-down bounce"
      viewbox="0 0 1792 1792"
      xmlns="https://www.w3.org/2000/svg"
    >
      <path
        d="M1412 897q0-27-18-45l-91-91q-18-18-45-18t-45 18l-189 189v-502q0-26-19-45t-45-19h-128q-26 0-45 19t-19 45v502l-189-189q-19-19-45-19t-45 19l-91 91q-18 18-18 45t18 45l362 362 91 91q18 18 45 18t45-18l91-91 362-362q18-18 18-45zm252-1q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"
        fill="#fff"
      ></path>
    </svg>
  </div>
</div>

위에서 추가한 화살표 코드는 SVG 형식입니다. Font Awesome CSS 아이콘 라이브러리를 기반으로 합니다.

이 GitHub 리포지토리에서 SVG 형식의 수백 개의 Font Awesome 아이콘 중에서 선택할 수 있습니다.

자원을 절약하세요!

많은 웹사이트가 웹사이트에 전체 Font Awesome 라이브러리를 로드하지만 소수의 아이콘만 사용합니다. 이는 대역폭 낭비입니다. 실제로 필요한 5~10개의 아이콘을 SVG 형식으로 다운로드하면 많은 리소스를 절약할 수 있습니다.

이 예에서는 SVG 파일을 HTML 마크업에 직접 포함합니다. 이 접근 방식을 인라인 SVG라고 합니다. 다양한 목적을 위해 SVG를 추가하는 다른 많은 방법이 있지만 다른 튜토리얼을 위해 저장하겠습니다.

이 튜토리얼에서는 이 SVG 아이콘을 사용합니다.

원본 SVG 소스를 위의 HTML 마크업에 있는 것과 비교하면 몇 가지 변경 사항이 있음을 알 수 있습니다.

너비 및 높이 속성을 제거했습니다(원본 파일이 너무 큼)
클래스 추가:arrow-circle-down CSS 섹션에서 필요합니다.

자, 다음으로 약간의 스타일을 추가하고 CSS 애니메이션으로 재미있는 부분으로 넘어가겠습니다!

<시간>

CSS로 컨테이너 및 화살표 스타일 지정

CSS 스타일시트 내에서 다음 규칙 세트(클래스, 속성 및 값)를 추가합니다.

* {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  background-color: #26a1ff;
  height: 100vh;
}

.container-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto auto 1rem auto;
}

.text-label {
  text-transform: uppercase;
  font-family: helvetica;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: #fff;
}

.arrow-circle-down {
  display: block;
  width: 40px;
  height: 40px;
  margin: 16px 0;
}

이제 브라우저 창을 새로 고치면 다음과 같아야 합니다.

CSS에서 일어나는 일:

먼저, 상위 div 요소의 .container를 제공합니다. 클래스 높이 값 100vh. 이렇게 하면 장치에 관계없이 전체 뷰포트를 차지합니다. display: flex;를 사용합니다. 속성을 사용하여 화살표 및 텍스트 레이블에 필요한 플렉스 컨테이너로 만듭니다. 또한 멋진 하늘색 배경색을 제공합니다.
그런 다음 .arrow-circle-down을 제공합니다. 너비와 높이가 40px로 고정되어 공간을 너무 많이 차지하지 않습니다. 눈에 띄지만 산만하지 않아야 합니다.
.text-label 대문자 속성과 약간의 문자 간격을 사용하여 약간의 외형적인 스타일을 얻습니다. 원하는 대로 자유롭게 변경하세요.
.container-footer를 제공합니다. 여백 자동 속성을 위쪽, 오른쪽 및 왼쪽에 추가합니다. 이것은 컨테이너 바닥글과 그 자식(아이콘 및 텍스트)을 우리가 원하는 위치인 부모 컨테이너의 맨 아래로 강제합니다. 하단 여백은 1rem;을 얻습니다. 화살표가 바운스될 때 모든 것이 뷰포트 내에 유지되도록 하는 값입니다.
.container-footer 클래스는 또한 몇 가지 플렉스 속성, flex-direction: column;을 얻습니다. 및 align-items: center; . 이러한 속성은 텍스트와 아이콘 요소가 서로의 맨 위에 쌓이도록 하고 컨테이너 바닥글의 중앙에 정확히 정렬되도록 합니다.

설명을 위해 margin: auto auto 1rem auto 선언은 더 장황한 것의 좋은 약어입니다.

margin-top: auto;
margin-right: auto;
margin-bottom: 1rem;
margin-left: auto;

다음은 CSS 애니메이션으로 화살표를 튕기게 만들 차례입니다!

<시간>

CSS를 사용하여 아래로 스크롤 화살표 애니메이션

CSS, JavaScript 및 조합을 사용하여 애니메이션을 만드는 방법에는 여러 가지가 있습니다. 이 예에서는 순전히 CSS로 애니메이션을 적용할 것입니다.

이미 .bounce를 추가했습니다. SVG 화살표가 포함된 이미지 요소에 클래스를 추가합니다. 아직까지는 CSS에서 클래스를 정의하거나 스타일을 지정하지 않았기 때문에 아무 작업도 수행하지 않습니다.

CSS 스타일시트에 다음을 추가하세요.

.bounce {
  animation: bounce 2s;
}

@keyframes bounce {
  0%,
  25%,
  50%,
  75%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-12px);
  }
}

이제 튀는 화살표가 있습니다.

CSS 코드에서 일어나는 일

화살표가 있는 SVG 요소에는 .bounce라는 클래스가 있습니다. . 이 클래스에는 animation이라는 속성이 있습니다. .

애니메이션 속성에는 bounce라는 두 가지 값이 있습니다. 및 2s .

bounce 값은 @keyframe 애니메이션@keyframes bounce를 트리거하는 함수입니다. 잠시 후 설명하겠습니다.

2s 값(2초)은 @keyframe 애니메이션이 실행되어야 하는 총 시간입니다.

@keyframe 애니메이션:

총 2초 길이입니다(animation property.으로 설정). )
총 7개의 서로 다른 키프레임이 있습니다. 0%, 25%, 40% 50%, 60% 75% 및 100%.
Y(0), Y(-20px) 및 Y(-12px)의 세 가지 Y 좌표 위치가 있습니다. 이러한 좌표는 화살표 요소가 시간의 다른 지점(키프레임)에서 위 또는 아래로 이동할지 여부를 결정합니다.

첫 번째 @keyframe 블록 {..} 정확히 5개의 키프레임인 0%, 25%, 50%, 75%, 100%에서 화살표가 시작 위치, 즉 Y(0px)에 있어야 한다고 말합니다.

0%,
25%,
50%,
75%,
100% {
  transform: translateY(0);
}

두 번째 @keyframe 블록 40% 표시에서 화살표에 Y(-20px) 위치를 지정하여 화살표가 위로 이동해야 한다고 말합니다.

40% {
  transform: translateY(-20px);
}

세 번째 키프레임 블록 60% 표시에서 화살표가 다시 위로 이동해야 한다고 말합니다. 이번에는 화살표 위치를 Y(-12px)로 지정하여 화살표를 처음의 절반 정도만 위로 이동합니다.

60% {
  transform: translateY(-12px);
}

중간 화살표가 위로 이동하는 두 키프레임(40% 및 60%)은 50% 키프레임에서 Y(0)으로 다시 이동합니다. 그래서 화살표가 위아래로 두 번, 짧은 시간에 비교적 빠르게 움직입니다.

실제 튀는 공을 모방하기 때문에 세 번째 위치에서 화살표를 -12px만 이동하기로 결정했습니다. 두 번째 아래로 공이 땅에 닿았을 때 첫 번째 공보다 훨씬 덜 위로 올라갈 것입니다. 공이 얼마나 튀는지(그리고 높이)는 물론 무게, 속도, 재료 유형 등과 같은 여러 요인에 의해 결정되지만 한 가지 방법이 없기 때문에 이는 우리에게 더 많은 흔들림의 여지를 줄 뿐입니다. 하기 위해.

애니메이션의 CSS가 혼란스럽다면 재생 시간과 CSS변환 번역을 어지럽혀 보세요. 재산. 약간의 연습을 통해 점을 연결하는 것이 훨씬 쉬울 것입니다.

40% 키프레임에 -48px의 변환 변환 속성을 부여하고 어떤 일이 발생하는지 확인하세요.
CSSanimation 제공 속성의 지속 시간은 2가 아닌 5초입니다. 그런 다음 값을 100ms로 지정해 보십시오(초 대신 밀리초를 사용할 수 있음).

극단적으로 실험하면 개념 집으로 운전하는 것이 더 쉬운 경우가 많습니다. 그곳에서 제가 "아하" 순간을 보내는 경우가 많습니다.

실험해 보세요!

CSS 애니메이션에는 수많은 가능성이 있습니다. 기존 애니메이션에 적용할 수 있는 몇 가지 변형을 간단히 살펴보겠습니다.

애니메이션 지연 속성

지금은 웹페이지가 로드되자마자 화살표가 튕깁니다. 사용자가 사이트에 들어간 후 몇 초 안에 주의가 산만해지지 않도록 약간 지연시킬 수 있습니다.

animation delay을 추가하면 됩니다. .bounce에 대한 속성 다음과 같은 클래스:

.bounce {
  animation: bounce 2s;
  animation-delay: 5s;
}

이제 2초 키프레임 애니메이션은 페이지가 로드된 후 정확히 5초가 지나야 실행이 시작됩니다.

애니메이션 반복 횟수 속성

애니메이션을 몇 번 반복하고 싶을 때가 있습니다. 애니메이션을 반복하려면 animation-iteration-count를 사용합니다. 다음과 같은 속성:

.bounce {
  animation: bounce 2s;
  animation-delay: 5s;
  animation-iteration-count: 2;
}

이제 화살표는 5초 후에 튀기 시작하지만 이번에는 키프레임 애니메이션을 한 번 더 반복합니다.

무한 CSS 애니메이션

드문 경우지만 CSS 애니메이션이 무한히 실행되기를 원하는 경우가 있습니다. 그렇게 하려면 애니메이션 반복 횟수를 infinite;로 변경합니다. 이렇게:

.bounce {
  animation: bounce 2s;
  animation-iteration-count: infinite;
}

그러나 무한한 애니메이션으로 조심스럽게 밟아보십시오. 영원히 회전하는 애니메이션을 좋아하는 사람은 아무도 없습니다.

미묘한 깜박임 애니메이션이 있는 작은 별 무리가 있는 일종의 생활 공간 배경이 있는 경우는 예외입니다. 분위기를 동적으로 유지하기 위해 이러한 목적으로 애니메이션을 반복/반복할 수 있습니다.

자동 접두사

이 코드가 모든 최신 브라우저에서 작동하도록 하려면 autoprefixer를 사용해야 합니다. 코드를 더 짧고 읽기 쉽게 유지하고 싶었기 때문에 여기 코드에 추가하지 않았습니다. 이 CodePen에 가면 접두사 속성을 포함한 모든 코드를 얻을 수 있습니다.

CSS 애니메이션 리소스

MDN 웹 문서:CSS 애니메이션