프로젝트 실습: CSS 애니메이션을 사용하여 멋진 효과를 만드는 방법에 대한 경험 공유

CSS 애니메이션은 많은 프런트엔드 개발자가 일반적으로 사용하는 기술 중 하나입니다. 멋진 버튼, 부드러운 페이지 로딩 효과, 동적 페이지 콘텐츠 등과 같은 매우 흥미로운 효과를 얻을 수 있습니다. 이 기사에서는 CSS 애니메이션을 사용하여 멋진 효과를 만드는 방법에 대한 몇 가지 경험을 공유하겠습니다. 한 번 보자!

1. Basics of Animation

애니메이션 제작을 시작하기 전에 몇 가지 기본 사항을 알아야 합니다. 먼저 CSS 애니메이션을 사용하려면 CSS의 "애니메이션" 개념을 이해해야 합니다. CSS 애니메이션은 키프레임을 통해 구현됩니다. 키프레임은 특정 기간 내의 특정 상태를 나타내며 이러한 상태 간에 전환이 있습니다. 예를 들어, 첫 번째 초의 요소 위치를 (0,0)으로 설정하고 두 번째 초의 위치를 ​​(100,100)로 설정할 수 있습니다. CSS 애니메이션을 통해 요소는 이 경로를 따라 이동합니다.

둘째, CSS 애니메이션의 구문을 이해해야 합니다. 다음은 간단한 예입니다.

@keyframes example {
  0% {transform: translateX(0);}
  50% {transform: translateX(100px);}
  100% { transform: translateX(0);}
}

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

이 예는 @keyframes를 통해 애니메이션의 상태를 지정하고 .example 클래스를 통해 특정 요소에 애니메이션을 적용합니다. 위 코드에서는 0%, 50%, 100%의 세 가지 상태를 갖는 example이라는 애니메이션을 정의합니다. 0%일 경우 요소의 위치가 초기 위치, 즉 X축 방향의 변위량이 0이 됩니다. 50%에서는 요소의 위치가 오른쪽으로 100픽셀 이동합니다. 100%에서는 요소가 원래 위치로 돌아갑니다. 마지막으로 animation 속성을 통해 .example 요소에 애니메이션을 적용합니다.

이것은 단순한 예일 뿐입니다. 물론 animation-duration, animation-delay, animation-timing-function 등과 같이 CSS 애니메이션에 사용할 수 있는 다른 구문과 속성이 많이 있습니다. 실제 생산 과정에서는 특정 요구 사항에 따라 이러한 속성을 유연하게 사용해야 합니다.

2. 멋진 효과를 만들기 위한 팁

CSS 애니메이션의 기본 지식을 익힌 후에는 멋진 효과를 만들기 시작할 수 있습니다. 아래에서는 몇 가지 실용적인 기술을 공유하겠습니다.

2.1 버튼 애니메이션 만들기

버튼 애니메이션을 만드는 것은 매우 일반적인 요구 사항입니다. 아래에서는 CSS 애니메이션을 사용하여 이 효과를 얻는 방법을 소개하기 위해 "흔들기 버튼"을 예로 사용합니다.

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

button {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) infinite;
}

위 코드는 흔들기라는 애니메이션을 정의한 다음 이를 버튼에 적용합니다. 이번 애니메이션에서는 변환 속성을 통해 버튼의 이동 효과를 구현하고, 큐빅-베지어 기능을 통해 애니메이션의 이징 효과를 조정합니다. 이 애니메이션을 버튼에 적용하면 우리가 기대하는 "흔들림" 효과를 볼 수 있습니다.

2.2 사진이 날아오고 난다

이 효과는 약간 슬라이드쇼와 비슷합니다. 매번 사진이 위쪽이나 아래쪽에서 날아오고 이어서 이전 사진이 위쪽이나 아래쪽에서 튀어나옵니다. 다음 코드는 이 효과를 얻습니다.

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

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

@keyframes slideOut {
  0% {
    transform: translateY(0);
  }

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

.slide-show {
  position: relative;
  height: 300px;
  overflow: hidden;
}

.slide-show img {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  margin: auto;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards; 
}

.slide-show .slide1 {
  animation-name: slideIn;
}

.slide-show .slide2 {
  animation-name: slideOut;
}

.slide-show .slide2.active {
  animation-name: slideIn;
}

위 코드에서는 SlideIn과 SlideOut이라는 두 개의 애니메이션을 정의하여 그림이 날아다니는 효과를 얻습니다. 그런 다음 .slide-show 컨테이너를 통해 그림을 래핑하고 각 그림에 다른 클래스 이름(예: .slide1, .slide2)을 할당합니다. 그림을 전환해야 할 경우 현재 그림의 클래스 이름을 "활성"으로 변경한 다음 JavaScript를 사용하여 DOM을 작동하기만 하면 됩니다.

위의 두 가지 예는 CSS 애니메이션의 빙산의 일각에 불과합니다. 독자가 CSS 애니메이션을 더 잘 익히고 더 멋진 효과를 만드는 데 도움이 되기를 바랍니다.

위 내용은 프로젝트 실습: CSS 애니메이션을 사용하여 멋진 효과를 만드는 방법에 대한 경험 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!