css 我如何平滑动画？[重复]

bmp9r5qi 于 2024-01-09 发布在其他

关注(0)|答案(1)|浏览(183)

此问题在此处已有答案：

How to Animate Gradients using CSS（5个答案）
7天前关闭
我想为圆锥梯度像左侧框动画平滑.我做了几乎所有相同的事情，这两个框动画除了box1是使用transform：rotate（）属性的动画和box2是使用圆锥梯度动画，但box2是不给像box1平滑过渡.我怎么能做到这一点？？

body{
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  position: relative;
  margin: 0;

}
.box1, .box2{
  border: 2px solid red;
  width: 200px;
  height: 200px;
  align-self: center;
  border-radius: 50%;
  background-image: conic-gradient(black 0deg, black 10deg, white 0deg);
}
@keyframes box1{
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

.box1{
  margin-right: 10px;
  animation-name: box1;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes box2{
  0% {background-image: conic-gradient(black 0deg, black 10deg, white 0deg);}
  100% {background-image: conic-gradient(black 0deg, black 300deg, white 0deg);}
}

.box2{
  margin-left: 10px;
  animation-name: box2;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

个字符
想要像box1一样平滑过渡的动画。

css

来源：https://stackoverflow.com/questions/77742865/how-can-i-smooth-the-animation

1条答案

按热度按时间

1tuwyuhd1#

您可以考虑使用@property at-rule注册一个带有特定参数的自定义CSS属性，使其可用于动画插值。然后，在@keyframes中更改此属性。

body{
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  position: relative;
  margin: 0;

}
.box1, .box2{
  border: 2px solid red;
  width: 200px;
  height: 200px;
  align-self: center;
  border-radius: 50%;
  background-image: conic-gradient(black 0deg, black 10deg, white 0deg);
}
@keyframes box1{
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

.box1{
  margin-right: 10px;
  animation-name: box1;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes box2{
  0% {
    --angle: 0deg;
  }
  100% {
    --angle: 300deg;
  }
}

.box2{
  margin-left: 10px;
  background-image: conic-gradient(black 0deg, black var(--angle), white 0deg);
  animation-name: box2;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

个字符
请注意，在撰写本文时，Firefox还不支持@property语法。

赞(0）回复(0）举报 2024-01-09

我来回答

css 我如何平滑动画？[重复]

1条答案

相关问题

热门标签

最新问答