Как предотвратить сброс CSS анимации после каждого цикла - PullRequest
Новая
       7

Как предотвратить сброс CSS анимации после каждого цикла

0 голосов
/ 28 сентября 2018

Есть ли способ предотвратить сброс CSS-анимации после каждого цикла?Я надеюсь, что это начинается с предыдущей позиции вместо начальной позиции. 

@keyframes spin{
  0%{
    transform:rotate(0deg);
  }
  50%{
    transform:rotate(180deg);
  }
  100%{
    transform:rotate(180deg);
  }
}

.spinning{
    position: absolute;
    height:50px;
    width:50px;
    top:100px;
    left:100px;
    background-color: lightgrey;
    border-radius: 50%;
    animation: spin 2s linear infinite;
}

.spinning::after{
    content:'';
    position:absolute;
    height:10px;
    width:10px;
    border-radius:50%;
    background-color:red;
    top:-5px;
    left:20px;
}
<!-- begin snippet: js hide: false console: false babel: false -->
<html>
  <head>
    <link rel="" href="">
  </head>
  <body>
    <div class="spinning"></div>
  </body>
</html>

Как вы можете видеть, после каждого поворота красная точка сбрасывается в верхнюю часть круга, но это не то, что я хочу, я хочу, чтобыначните вращаться сверху круга, затем снизу, затем сверху, затем снизу и так далее.Я плохо говорю по-английски, надеюсь, вы понимаете, что я пытаюсь сказать.

1 Ответ

0 голосов
/ 28 сентября 2018

Точка возвращается в исходное положение (0%), поскольку последний keyframe был на 180deg.Чтобы сделать так, чтобы он завершил весь круг, вам нужно закончить на 360deg.Таким образом, он все еще сбрасывается, но, поскольку 360deg и 0deg технически находятся в одинаковом положении, вы не увидите этот «переход».

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(180deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.spinning {
  position: absolute;
  height: 50px;
  width: 50px;
  top: 100px;
  left: 100px;
  background-color: lightgrey;
  border-radius: 50%;
  animation: spin 4s linear infinite forwards;
}

.spinning::after {
  content: '';
  position: absolute;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background-color: red;
  top: -5px;
  left: 20px;
}
<div class="spinning"></div>
...