如何创建平滑的 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中文网其他相关文章！