SVG круговая анимация - PullRequest
Новая
       12

SVG круговая анимация

0 голосов
/ 16 мая 2018

<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>

Ответы [ 2 ]

0 голосов
/ 17 мая 2018

Пожалуйста, используйте Положение для некоторого эффекта анимации 

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>
0 голосов
/ 16 мая 2018

Вам нужно изменить .div1 position на любое значение, отличное от значения по умолчанию из static, чтобы применить свойства top и right 

.div1 {
  position: absolute; /* or "relative" / "fixed" */
  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>
...