CSS 그라디언트를 애니메이션하는 방법은 무엇입니까?

배경 위치, 키 프레임 및 배경 크기를 활용하여 JavaScript없이 CSS 그라디언트를 애니메이션 할 수 있습니다. 1. 배경 위치를 사용하여 부드러운 루핑으로 선형 구배 이동을 만듭니다. 2. 미묘한 방향 또는 색 변속을 위해 키 프레임을 사용하여 두 그라디언트 사이를 애니메이션합니다. 3. 펄싱과 같은 동적 효과를 위해 배경 크기 변화와 결합하십시오. 4. 복잡한 애니메이션이 말더듬을 일으킬 수있는 모바일 및 사파리에서 성능 및 브라우저 지원을 고려하십시오.

CSS 그라디언트를 애니메이션하는 것은 색상이나 위치를 애니메이션하는 것만 큼 간단하지 않습니다. 그라디언트는 단일 값이 아니기 때문에 기능입니다. 그러나 몇 가지 트릭과 현대 기술로 대부분의 브라우저에서 작동하는 부드럽고 시선을 사로 잡는 그라디언트 애니메이션을 얻을 수 있습니다.

JavaScript에 의존하지 않고이를 수행하는 방법은 다음과 같습니다.

선형 구배 이동에 background-position 사용하십시오

선형 구배를 애니메이션하는 가장 간단한 방법 중 하나는 배경 위치를 변경하는 것입니다. 이것은 요소를 가로 지르는 움직임의 환상을 제공합니다.

예를 들어:

 .Animate-gradient {
  너비 : 100%;
  높이 : 100VH;
  배경 : 선형 그레이드 (45deg, #ff9a9e, #fad0c4);
  애니메이션 : Movegradient 5S 선형 무한;
}

@keyframes movegradient {
  0% {배경 위치 : 0% 50%; }
  50% {배경 위치 : 100% 50%; }
  100% {배경 위치 : 0% 50%; }
}

• background-size ( 200% 200% )와 함께 사용될 때 가장 잘 작동합니다.
• 부드러운 루핑에는 신중한 키 프레임 타이밍이 필요합니다
• 그라디언트 만 움직입니다. 색상이나 방향을 변경하지 않습니다.

키 프레임으로 두 그라디언트 사이에 애니메이션

두 가지 다른 그라디언트 스타일을 전환하려면 @keyframes 에서 둘 다 정의 할 수 있습니다.

 @keyframes swapgradient {
  0% {
    배경 이미지 : 선형 그레이드 (오른쪽, #A18CD1, #fbc2eb);
  }
  50% {
    백그라운드 이미지 : 선형 그레이드 (하단, #fbc2eb, #a18cd1);
  }
  100% {
    백그라운드 이미지 : 선형 등급 (왼쪽으로, #a6c0fe, #f687b3);
  }
}

• 그라디언트간에 직접 보간 할 수는 없습니다 . 하드 스위치입니다.
• 방향이나 부드러운 색상 변화와 같은 미묘한 변화에 가장 적합합니다.
• 복잡한 전환을 피하십시오 - 비슷한 구조를 고수하십시오

동적 효과를 위해 배경 크기와 결합하십시오

background-size 바꾸면서 background-position 애니메이션하는 동안 더 역동적 인 효과가 발생합니다. 그라디언트 캔버스를 통해 축소하고 패닝하는 것처럼 생각하십시오.

이 설정을 시도하십시오.

 @keyframes pulsegradient {
  0% {
    배경 크기 : 100% 100%;
    배경 위치 : 0% 0%;
  }
  50% {
    배경 크기 : 150% 150%;
    배경 위치 : 50% 50%;
  }
  100% {
    배경 크기 : 100% 100%;
    배경 위치 : 100% 100%;
  }
}

• 맥동 또는 흐르는 모양을 만듭니다
• 영웅 섹션 또는 호버 효과에 적합합니다
• 단순하게 유지되면 성능 친화적입니다

성능 및 브라우저 지원을 고려하십시오

CSS 전용 방법은 가볍지 만 일부 gotchas가 있습니다.

• 사파리는 때때로 애니메이션 그라디언트가있는 가늘어집니다
• 항상 모바일에서 테스트하십시오 - 모든 장치가 부드럽게 처리하는 것은 아닙니다.
• 너무 많은 레이어 또는 고주파 애니메이션 = jank

더 매끄럽거나 더 복잡한 것이 필요한 경우 캔버스 기반 솔루션 또는 WebGL 셰이더 (예 : 3.js)를 사용하는 것을 고려하십시오. 그러나 대부분의 경우 위의 방법이 제대로 작동해야합니다.

기본적으로 위치에 애니메이션, 키 프레임을 통한 그라디언트 스위치 또는 추가 감상을위한 크기 조정. 완벽하지는 않지만 창의력이 약간있어 꽤 매끄러운 효과를 꺼낼 수 있습니다.

위 내용은 CSS 그라디언트를 애니메이션하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!