Question

我正在尝试使用CSS-Doodle制作一些形状的动画，这将是我背景的一部分。基本上，我希望它们始终在屏幕上浮动并始终旋转，但是我希望两个动画以不同的速度移动。

在下面的代码中，我只能通过切换链接顺序来使其中任何一个起作用。

动画：自旋@r（3s，10s）无限，流@r（20s，40s）无限线性；

@keyframes flow {
  0%, 100%{
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)   
  }
  50% {
    -webkit-transform: translate3d(@r(-500%, 1000%), @r(-500%, 1000%), 0);  
    transform: translate3d(@r(-500%, 1000%), @r(-500%, 1000%), 0);       
  }
}

@keyframes spin {
  from  {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }   
}

我希望即使不是纯CSS，也可以同时应用这两种方法。

Answer 1

也许有更好的方法，但是最简单的解决方案是在元素周围放置一个包装器，以便该包装器获得一个动画，而实际元素获得另一个动画。

将无限平移和旋转（以不同速度）动画添加到一个元素

1 个答案: