WordPress에 CSS 애니메이션 추가하기

게시 됨: 2022-07-11

애니메이션은 웹 페이지에 매력적이고 시각적으로 흥미로운 기능이 될 수 있습니다. 그러나 Flash 또는 JavaScript로 애니메이션을 구축하면 사이트 리소스의 상당 부분을 차지하게 됩니다.

다행히 CSS(Cascading Style Sheets)를 사용하여 WordPress 웹 사이트에 애니메이션을 추가할 수 있습니다. 이 코딩 언어를 사용하면 사이트에 애니메이션을 무제한으로 통합할 수 있지만 여전히 상대적으로 접근하기 쉽고 배우기 쉽습니다.

이 기사에서는 CSS 애니메이션이 작동하는 방식과 플러그인을 사용하거나 사용하지 않고 웹사이트에 CSS 애니메이션 속성을 추가하는 방법에 대해 설명합니다. 움직이자!

목차
1. CSS 애니메이션은 어떻게 작동합니까? (그리고 당신이 그것들을 사용해야 하는 이유)
2. 플러그인으로 CSS 애니메이션 추가하기
2.1. 1단계: CSS 애니메이션 플러그인 설치 및 활성화
2.2. 2단계: 애니메이션 디자인
2.3. 3단계: 지연 및 속도 사용자 지정
2.4. 4단계: 애니메이션 저장 및 미리보기
3. 플러그인 없이 CSS 애니메이션 추가하기
3.1. 1단계: 관련된 CSS 속성 이해
3.2. 2단계: animate.css 파일 만들기
3.3. 3단계: animate.css 파일을 사이트에 업로드
3.4. 4단계: functions.php를 통해 Animate 스타일시트 호출
3.5. 5단계: CSS 클래스를 사용하여 애니메이션 적용
4. WP 엔진으로 사이트를 멋지게 유지하세요

CSS 애니메이션은 어떻게 작동합니까? (그리고 당신이 그것들을 사용해야 하는 이유)

CSS3는 시간이 지남에 따라 요소(예: 이미지 또는 버튼)의 스타일을 변경하여 사용자에게 애니메이션을 만들 수 있는 기회를 제공합니다. 요소의 CSS 속성을 원하는 만큼 원하는 만큼 수정할 수 있습니다.

Flash 또는 Javascript 애니메이션과 달리 CSS 애니메이션은 브라우저 호환성 문제와 복잡한 코딩을 방지합니다. 이를 통해 성능 저하와 같은 부정적인 부작용 없이 중요한 기능에 주의를 집중할 수 있습니다.

플러그인으로 CSS 애니메이션 추가하기

코딩 기술에 자신이 없다면 저희가 도와드리겠습니다. 대신 플러그인을 사용하여 CSS 애니메이션을 쉽게 만들 수 있습니다.

1단계: CSS 애니메이션 플러그인 설치 및 활성화

시작하려면 CSS 애니메이션 플러그인을 설치해야 합니다. 우리는 Blocks Animation: CSS Animations for Gutenberg Blocks를 사용하고 있습니다. 이는 블록 편집기를 위해 특별히 제작된 비교적 새로운 도구입니다.

WordPress 대시보드에서 플러그인 > 새로 추가 로 이동하여 이 플러그인을 찾을 수 있습니다. 찾으면 지금 설치 를 클릭한 다음 활성화 를 클릭합니다.

활성화가 완료되면 간단한 애니메이션을 포함할 게시물 또는 페이지로 이동합니다.

2단계: 애니메이션 디자인

그런 다음 애니메이션을 적용할 요소를 클릭합니다. 사이드바의 차단 탭에서 1단계에서 플러그인을 활성화할 때 추가된 애니메이션 섹션을 찾습니다 . 여기에 몇 가지 다른 효과가 나열된 드롭다운 메뉴가 표시됩니다.

콘텐츠에 적합한 애니메이션 옵션을 찾기 위해 원하는 만큼 다양한 애니메이션 옵션을 사용할 수 있습니다.

3단계: 지연 및 속도 사용자 지정

Blocks Animation 플러그인은 또한 애니메이션의 지연 및 속도 를 사용자 정의하는 타이밍 기능과 함께 제공됩니다.

이 두 가지 설정 중 첫 번째 설정은 애니메이션 시작을 연기합니다. 이렇게 하면 페이지가 로드된 후 요소에 주의를 기울이거나 곧 설명할 애니메이션을 조합하여 사용할 수 있습니다. 애니메이션 지연 속성은 최대 5초까지 설정할 수 있습니다.

속도 드롭다운을 사용하여 애니메이션 을 느리게, 느리게, 빠르게 또는 빠르게 만들 수 있습니다. 느린 애니메이션은 방문자에게 더 미묘하고 덜 거슬리는 반면 빠른 애니메이션은 주의를 끌기에 더 효과적입니다.

4단계: 애니메이션 저장 및 미리보기

게시물이나 페이지를 초안으로 저장하고 게시하기 전에 애니메이션 요소를 미리 보는 것이 좋습니다. 한 페이지에서 여러 CSS 애니메이션으로 작업하는 경우 애니메이션 이름 속성도 저장해야 합니다. 애니메이션은 매우 유용할 수 있지만 주의가 산만해지고 페이지가 어수선하게 느껴질 수도 있습니다.

페이지를 미리 보고 애니메이션을 비교적 단순하게 유지하면 이러한 바람직하지 않은 결과를 방지할 수 있습니다. 아래에서 애니메이션 이미지를 이전 단계에서 스타일을 지정한 버튼과 페어링하는 완성된 CSS 애니메이션 예제를 볼 수 있습니다.

애니메이션이 나머지 콘텐츠와 맞지 않거나 원하는 효과가 있는 경우 블록 편집기로 돌아가서 조정할 수 있습니다. 이것이 CSS 애니메이션 플러그인 사용의 장점입니다. 빠르고 쉽습니다.

플러그인 없이 CSS 애니메이션 추가하기

테마 파일을 편집하는 것이 편하다면 플러그인 없이 수동으로 사용자 정의 애니메이션을 만들 수 있습니다. 약간의 코딩 노하우가 필요하므로 이 솔루션은 개발 경험이 있는 사람에게 맡기는 것이 가장 좋습니다.

시작하기 전에 사이트를 백업하십시오. 필요한 경우 테마의 기본 파일로 쉽게 되돌릴 수 있도록 하위 테마를 사용하는 것도 현명합니다.

1단계: 관련된 CSS 속성 이해

실제로 편집을 수행하기 전에 CSS 애니메이션을 만들 때 염두에 두어야 할 8가지 중요한 속성이 있습니다.

  • @keyframes: 애니메이션을 통해 요소에 적용할 스타일을 지정합니다.
  • animation-name: 코드의 다른 곳에서 애니메이션을 참조하는 데 사용할 수 있는 이름을 만듭니다.
  • animation-duration: 애니메이션이 실행되는 시간을 정의합니다.
  • animation-delay: 페이지가 로드된 후 애니메이션이 시작될 때까지 기다려야 하는 시간을 나타냅니다.
  • animation-iteration-count: 애니메이션이 실행되어야 하는 횟수를 기록합니다.
  • animations-direction: 애니메이션이 실행되어야 하는 방향을 나타냅니다.
  • animation-timing-function: 애니메이션의 속도 곡선을 결정합니다.
  • animation-fill-mode: 애니메이션이 재생되지 않을 때 요소의 스타일을 지정합니다.
  • animation: 키프레임을 요소에 바인딩하기 위한 약식 속성입니다.

이러한 속성 중 이해해야 할 가장 중요한 것은 '키프레임'입니다. 이 용어는 메인 프레임을 키프레임이라고 하고 다른 프레임은 키프레임 내부 또는 외부로 이끌기 위해 그려지는 손으로 그린 ​​애니메이션 프로세스에서 유래했습니다.

CSS 애니메이션에서 키프레임은 어떤 일이 언제 발생하는지 지정합니다. 예를 들면 다음과 같습니다.

 @keyframes 예시 {
 0% {배경색: 빨간색;}
 25% {배경색: 노란색;}
 50% {배경색: 파란색;}
 100% {배경색: 녹색;}
 }

위의 키프레임은 애니메이션의 25% 동안 지정된 요소의 배경색이 빨간색에서 노란색으로 변경된다고 명시하고 있습니다. 백분율은 일반적으로 애니메이션의 타이밍을 정의하는 데 사용됩니다. 그러나 from과 to는 각각 0%와 100% 대신 사용할 수 있습니다.

2단계: animate.css 파일 만들기

CSS 애니메이션을 추가하려면 위의 속성을 사용하여 원하는 텍스트 편집기에서 파일을 만들어야 합니다. 여기에는 사용하려는 모든 애니메이션의 키프레임이 포함되어야 합니다. 그런 다음 사이트의 요소에 적용할 수 있도록 특정 CSS 클래스에 바인딩합니다.

여기 예가 있습니다. 아래 코드에서는 먼저 변환 및 가시성 속성을 사용하여 CSS 키프레임 애니메이션을 만듭니다. 이를 통해 화면 오른쪽에서 요소를 밀어넣을 수 있습니다.

 @keyframes slideInRight {
에서 {
-webkit-transform: translate3d(100%, 0, 0);
변환: translate3d(100%, 0, 0);
가시성: 가시성;
}
에게 {
-웹킷 변환: translate3d(0, 0, 0);
변환: translate3d(0, 0, 0);
}
}

그런 다음 해당 키프레임을 CSS 클래스에 바인딩해야 합니다. 이 경우에는 이름이 slideInRight입니다. 이 코드는 파일에서 위의 키프레임 바로 뒤에 배치됩니다.

 .slideInRight {
 -웹킷 애니메이션 이름: slideInRight;
 애니메이션 이름: slideInRight;
 }

이 과정을 반복하여 원하는 만큼 애니메이션을 만들 수 있습니다. 그런 다음 파일을 imate.css로 저장합니다. 또는 널리 사용되는 Animate.css 파일을 다운로드할 수 있습니다. 여기에는 수십 개의 인기 있는 애니메이션에 대한 키프레임과 CSS 클래스가 포함되어 있으므로 복잡한 애니메이션을 직접 코딩할 필요가 없습니다.

3단계: animate.css 파일을 사이트에 업로드

animate.css 파일이 완성되면 테마 디렉토리에 업로드해야 합니다. 이렇게 하려면 FTP(파일 전송 프로토콜) 및 FileZilla와 같은 FTP 클라이언트를 사용하여 사이트에 액세스합니다. 호스팅 계정에서 필요한 자격 증명을 찾을 수 있습니다.

public_html 디렉토리를 입력하고 wp-content > 테마로 이동한 다음 활성 테마(또는 하위 테마)에 대한 폴더를 찾아야 합니다.

css 라는 하위 디렉토리를 찾습니다. 있는 경우 animate.css 파일(또는 Animate.css의 animate.mini.css 파일)을 여기에 업로드합니다. 이 폴더가 아직 없는 경우 새 하위 디렉터리를 쉽게 만들고 그에 따라 이름을 지정할 수 있습니다.

파일이 성공적으로 업로드된 후 바로 FTP 클라이언트를 종료하지 마십시오. WordPress 사이트에서 이 스타일시트에 액세스하려면 약간의 파일 편집이 필요합니다.

4단계: functions.php 를 통해 Animate 스타일시트 호출

다음으로 활성 테마의 폴더에서 functions.php 파일을 찾으십시오. 마지막에 다음 코드 스니펫을 추가합니다.

 add_action( 'wp_enqueue_scripts', 'wpb_animate_styles' );
함수 wpb_animate_styles() {
 wp_enqueue_style( 'animate-css', get_stylesheet_directory_uri() . '/css/animate.css', '3.5.0', '모두');
}

Animate.css에서 animate.min.css 파일을 업로드한 경우 마지막 줄에 animate.css 대신 animate.min.css를 사용해야 합니다.

이렇게 하면 테마가 방금 업로드한 스타일시트를 호출할 수 있으므로 해당 스타일시트의 클래스를 사이트의 요소에 적용할 수 있습니다. 변경 사항이 저장되면 WordPress 대시보드로 돌아갑니다.

5단계: CSS 클래스를 사용하여 애니메이션 적용

이제 animate.css 파일의 모든 클래스를 게시물 및 페이지의 요소에 적용할 수 있습니다. Animate.css 파일을 사용하는 경우 GitHub에서 포함된 모든 항목의 전체 목록을 참조할 수 있습니다.

애니메이션을 적용할 요소가 포함된 게시물 또는 페이지로 이동합니다. 클래식 편집기에서 텍스트 편집기로 전환합니다. 블록 편집기를 사용하는 경우 블록 도구 모음에서 점 3개 아이콘을 클릭 하고 HTML로 편집을 선택합니다.

그런 다음 애니메이션 클래스와 애니메이션 클래스를 요소 태그에 추가합니다.

마지막으로 게시물이나 페이지를 미리 봅니다. 이제 애니메이션이 작동해야 합니다.

이 프로세스를 조정하여 animate.css 파일에 애니메이션을 통합할 수 있습니다.

WP 엔진으로 사이트를 멋지게 유지하세요

애니메이션과 같은 시각적으로 흥미로운 기능을 사용하면 사이트 방문자의 참여를 유도하고 보다 전문적인 온라인 인지도를 얻을 수 있습니다. 여기 WP 엔진에서 WordPress 개발자를 위한 최고의 팁과 트릭을 제공하여 귀하의 사이트가 항상 최상의 상태가 되도록 하는 데 자부심을 느낍니다.

최고 수준의 호스팅 플랫폼과 결합하면 사용자에게 깊은 인상을 주는 데 필요한 모든 도구를 갖게 됩니다. 오늘 우리의 계획을 확인하십시오!