갑작스러운 위치 변경 없이 부드러운 CSS 그라데이션 애니메이션을 만들려면 어떻게 해야 합니까?

CSS를 사용하여 그라데이션 애니메이션

특정 시나리오에서는 원활한 그라데이션 애니메이션을 구현하는 데 어려움이 있을 수 있습니다. 주목할만한 문제 중 하나는 애니메이션 중에 갑작스러운 위치 변경입니다. 제공된 코드는 이 문제를 보여줍니다.

.animated {
  animation: gra 5s infinite;
  animation-direction: reverse;
}

@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%);
  }
}

해결책

이 문제를 해결하려면 키프레임과 함께 CSS의 배경 위치 속성을 활용하여 더 부드러운 이미지를 만들 수 있습니다. 생기. 다음 코드를 고려하세요.

#gradient
{
    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%}
}

이 코드에서:

• 배경 크기 속성은 그라데이션의 원활한 반복을 보장합니다.
• 배경 위치 속성은 제어합니다. 그라디언트의 시작 위치.
• 키프레임은 background-position 속성에 애니메이션을 적용하여 그라디언트의 환상을 만듭니다. 움직임.

위 내용은 갑작스러운 위치 변경 없이 부드러운 CSS 그라데이션 애니메이션을 만들려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!