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

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

Mary-Kate Olsen

풀어 주다： 2024-12-12 22:01:14

원래의

480명이 탐색했습니다.

How Can I Create Smooth CSS Gradient Animations Without Abrupt Position Changes?

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%}
}

로그인 후 복사

이 코드에서: