我如何使这个动画在CSS中更流畅？

yzuktlbb 于 2022-12-20 发布在其他

关注(0)|答案(2)|浏览(172)

我是一个网络开发的新手，我想让一个圆平滑地旋转它的线性梯度方向，但是在每个方向之间有一个跳跃。
我希望它是平滑的，因为我使用了步骤并将animation-timing-function设置为线性，但在动画的每一步之间都有一个跳跃。
我不太清楚如何显示代码在这里，如果有人有任何提示初学者我会很感激。
编辑：下面是代码：）

/* The animation: */

@keyframes gradientShift {

    0% {background-image: linear-gradient(to right, rgb(0, 4, 255), rgb(0, 162, 255));}

    25% {background-image: linear-gradient(rgb(0, 4, 255), rgb(0, 162, 255));}

    50% {background-image: linear-gradient(to right, rgb(0, 162, 255), rgb(0, 4, 255));}

    75% {background-image: linear-gradient(rgb(0, 162, 255), rgb(0, 4, 255));}

    100% {background: linear-gradient(to right, rgb(0, 4, 255), rgb(0, 162, 255));}

}

/* The other styles*/
.circle-wrapper {
    background-image: linear-gradient(to right, rgb(0, 4, 255), rgb(0, 162, 255));

    animation: gradientShift;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

    margin-top: 28vh;
    width: 12vh;
    height: 12vh;
    margin-left: 35vh;
    border-radius: 100px;
    position: absolute;
    padding: 3px;
    z-index: 1000;
}

<div class="circle-wrapper">
            <div class="circle-module">&nbsp;</div>
        </div>

css

来源：https://stackoverflow.com/questions/74844654/how-do-i-make-this-animation-smoother-in-css

2条答案

按热度按时间

kq4fsx7k1#

这是因为CSS不能处理背景图像中的过渡。基本上你的CSS动画是"阶梯式"的，会有5个不同的帧，中间没有插值。
由于您只是旋转渐变的Angular ，而不是执行颜色更改，因此您可以简单地在伪元素上设置线性渐变，然后旋转它：

/* The animation: */

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
        transform: rotate(360deg);
  }
}

/* The other styles*/

.circle-wrapper {
  margin-top: 28vh;
  width: 12vh;
  height: 12vh;
  margin-left: 35vh;
  border-radius: 100px;
  position: absolute;
  padding: 3px;
  z-index: 1000;
  overflow: hidden;
}

.circle-wrapper::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(to right, rgb(0, 4, 255), rgb(0, 162, 255));
  animation: rotate;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  content: '';
}

.circle-wrapper>* {
  position: relative;
}

<div class="circle-wrapper">
  <div class="circle-module">&nbsp;</div>
</div>

赞(0）回复(0）举报 2022-12-20

sauutmhj2#

在css中没有办法使background-image属性具有动画效果。
您可以查看CSS Animated Properties来了解可动画化的css属性。
但在javascript中仍然可以使用setInterval()，只需很短的时间就可以改变旋转Angular ：

let circle = document.getElementsByClassName("circle-wrapper")[0]
let rotateDeg = 0
setInterval(function() {
    circle.style.backgroundImage = "linear-gradient(" + ++rotateDeg + "deg, rgb(0, 4, 255), rgb(0, 162, 255))"
}, 2000/360)

.circle-wrapper {
    background-image: linear-gradient(to right, rgb(0, 4, 255), rgb(0, 162, 255));
    margin-top: 28vh;
    width: 12vh;
    height: 12vh;
    margin-left: 35vh;
    border-radius: 100px;
    position: absolute;
    padding: 3px;
    z-index: 1000;
}

<div class="circle-wrapper">
  <div class="circle-module">&nbsp;</div>
</div>

赞(0）回复(0）举报 2022-12-20

我来回答

我如何使这个动画在CSS中更流畅？

2条答案

相关问题

热门标签

最新问答