CSS에서 부드러운 그라데이션 애니메이션을 얻는 방법은 무엇입니까?

CSS로 부드러운 그라데이션 애니메이션 구현

질문: 부자연스러운 그라데이션 애니메이션

CSS 그라데이션 영역에는 골치 아픈 오래된 과제가 있습니다. 많은 개발자들이 애니메이션 중에 그라디언트의 갑작스럽고 갑작스러운 움직임을 경험했습니다. 이러한 거슬리는 효과는 그라데이션이 각 애니메이션 단계에서 갑자기 위치를 변경할 때 발생합니다.

다음 예를 고려하세요.

@keyframes gra {
  0% {
    background: linear-gradient(135deg, #ff670f 0%, #ff670f 21%, #ffffff 56%, #0eea57 88%);
  }
  50% {
    background: linear-gradient(135deg, #ff670f 0%, #ff670f 10%, #ffffff 40%, #0eea57 60%);
  }
  100% {
    background: linear-gradient(135deg, #ff670f 0%, #ff670f 5%, #ffffff 10%, #0eea57 40%);
  }
}

이 코드에서 그라데이션의 위치는 세 프레임 사이에서 갑자기 이동합니다. 결과적으로 불안정한 애니메이션이 발생합니다. 목표는 색상 진행의 자연스러운 흐름을 반영하여 원활하고 부드러운 전환을 달성하는 것입니다.

답변: 그라데이션 애니메이션 숙달

부드러운 그라데이션 애니메이션의 비밀을 풀기 위해 다른 접근 방식을 도입합니다. . 그래디언트의 위치를 ​​직접 수정하는 대신 크기를 이동합니다. 이러한 미묘한 변화는 애니메이션의 유동성을 눈에 띄게 향상시킵니다.

#gradient {
  height: 300px;
  width: 300px;
  border: 1px solid black;
  font-size: 30px;
  background: linear-gradient(130deg, #ff7e00, #ffffff, #5cff00);
  background-size: 200% 200%;

  -webkit-animation: Animation 5s ease infinite;
  -moz-animation: Animation 5s ease infinite;
  animation: Animation 5s ease infinite;
}

@-webkit-keyframes Animation {
  0% {
    background-position: 10% 0%;
  }
  50% {
    background-position: 91% 100%;
  }
  100% {
    background-position: 10% 0%;
  }
}
@-moz-keyframes Animation {
  0% {
    background-position: 10% 0%;
  }
  50% {
    background-position: 91% 100%;
  }
  100% {
    background-position: 10% 0%;
  }
}
@keyframes Animation {
  0% {
    background-position: 10% 0%;
  }
  50% {
    background-position: 91% 100%;
  }
  100% {
    background-position: 10% 0%;
  }
}

이 개선된 코드에서는 이제 배경 크기 속성을 조작합니다. 애니메이션은 작은 그래디언트 크기로 시작하여 그래디언트가 전체 요소를 덮을 때까지 점진적으로 증가합니다. 이는 색상이 요소 전체에 원활하게 흐르는 것처럼 보이는 효과를 만들어냅니다.

이 기술을 사용하여 우아하고 매혹적인 그라데이션 애니메이션을 구현하여 우아함과 움직임이 가미된 디자인에 생기를 불어넣었습니다.

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