如何使从中央动画传播？

Question

我建立了一个这样斜向移动圆点的动画。

div {
  width: 100%;
  height: 100vh;
  background-image: radial-gradient(#85c79f 7px, transparent 7px), radial-gradient(#fc536c 7px, transparent 7px), radial-gradient(#e99377 7px, transparent 7px), radial-gradient(#ebe49a 7px, transparent 7px);
  animation: animation1 5s infinite linear;
  background-size: 100px 100px;
}

@keyframes animation1 {
  from {
    background-position: 0 0, 50px 0, 25px 50px, 75px 50px;
  }
  to {
    background-position: -100px -100px, -50px -100px, -75px -50px, -25px -50px;
  }
}

<div></div>

我想改变这其中每个圆点从屏幕中心移出的动画。

然而，由于background-image属性是不能设置动画，我不知道如何实现它。

我怎样才能实现呢？

Answer 1

您可以动画background-size和/或background-position以获得所需的效果：

body {
  margin:0;
  height: 100vh;
  background-image: radial-gradient(#85c79f 7px, transparent 7px), radial-gradient(#fc536c 7px, transparent 7px), radial-gradient(#e99377 7px, transparent 7px), radial-gradient(#ebe49a 7px, transparent 7px);
  animation: animation1 5s infinite linear;
  background-size: 20px 20px;
  background-position: 50% calc(50% + 20px), calc(50% - 20px) 50%, calc(50% + 20px) 50%, 50% calc(50% - 20px);
}

@keyframes animation1 {
  from {
    background-size: 20px 20px;
    background-position: calc(50% - 10px) calc(50% + 20px), calc(50% - 20px) calc(50% + 10px), calc(50% + 20px) calc(50% - 10px), calc(50% + 10px) calc(50% - 20px);
  }
  to {
    background-size: 300px 300px;
    background-position: calc(50% - 10px) calc(50% + 100px), calc(50% - 100px) calc(50% + 10px), calc(50% + 100px) calc(50% - 10px), calc(50% + 10px) calc(50% - 100px);
  }
}