如何創建平滑的 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的background-position屬性結合關鍵影格來建立更平滑的效果動畫片。考慮以下程式碼：

#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-size 屬性確保漸變的無縫循環。
• background-position 屬性控制漸變的起始位置。
• 關鍵影格對背景位置屬性進行動畫處理，創造漸變的錯覺運動。

以上是如何創建平滑的 CSS 漸層動畫而不突然改變位置？的詳細內容。更多資訊請關注PHP中文網其他相關文章！