如何在CSS中實現平滑的漸變動畫？

使用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中文網其他相關文章！