SVG圈动画问题

Question

<circle />已形成，但不随@keyframes移动。谁能告诉我我做错了什么？

.div1 {
  animation: viji 3s 2;
}

@keyframes viji {
  0% {top: 30px; right: 150px}
  25% {top: 130px; right: 150px}
  40% {top: 230px; right: 150px}
  75% {top: 330px; right: 150px}
}

<svg class="div1" height="100px">
  <circle cx="50" cy="50" r="50" fill="red" />
</svg>

Answer 1

您需要将.div1的{​​{1}}更改为position的默认值以外的任何内容，以便应用{ {1}}和static 属性：

＆＃13;

＆＃13;

top

＆＃13;

right

＆＃13;

＆＃13;

＆＃13;

Answer 2

请使用Position来获得一些动画效果

circle {
  cx: 50;
  cy: 50;
  r: 50;
  fill: red;
}

.div1 {
  position: absolute;
  animation: viji 3s 2;
}

@keyframes viji {
  0% {top: 30px;right: 150px;}
  25% {top: 130px;right: 150px;}
  40% {top: 230px;right: 150px;}
  75% {top: 330px;right: 150px;}
}

<svg class="div1" height="100px">
  <circle/>
</svg>