如何创建平滑的 CSS 渐变动画而不突然改变位置？-css教程-PHP中文网

如何创建平滑的 CSS 渐变动画而不突然改变位置？

Mary-Kate Olsen

发布： 2024-12-12 22:01:14

原创

481 人浏览过

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

登录后复制

在此代码中：