Бесконечное вращение CSS по оси Y

Question

Я пытаюсь сделать анимацию монеты, которая бесконечно вращается по оси Y, но я не могу выполнить эту работу. Вот демо: https://jsfiddle.net/kaeatjag/ Как вы можете видеть, это только анимация один раз, один поворот, а затем начинается с начала. Как я могу это исправить?

.coin { 
 
    width: 100px; 
 
    height: 100px; 
 
    border-radius: 100px; 
 
    background: linear-gradient(to right, red 50%, black 50%); 
 
    animation: coin-rotate 1s both infinite; 
 
} 
 

 
@keyframes coin-rotate { 
 
    from { 
 
    transform: rotateY(0); 
 
    } 
 

 
    to { 
 
    transform: rotateY(180deg); 
 
    } 
 
}

<div class="coin"></div>

Answer 1

Просто добавьте дополнительный кадр в анимации и вернуть его в исходное состояние.

Transform из 0% (0deg) -> 50% (180deg) -> 100% (0/360deg)

Примечания: Отрегулируйте продолжительность анимации согласно вашей потребности

Updated fiddle

.coin { 
 
    width: 100px; 
 
    height: 100px; 
 
    border-radius: 100px; 
 
    background: linear-gradient(to right, red 50%, black 50%); 
 
    animation: coin-rotate 2s both infinite; 
 
} 
 
@keyframes coin-rotate { 
 
    0 { 
 
    transform: rotateY(0); 
 
    } 
 
    50% { 
 
    transform: rotateY(180deg); 
 
    } 
 
    100% { 
 
    transform: rotateY(0deg); 
 
    } 
 
}

<div class="coin"></div>

Answer 2

Изменения анимации, так что это конец состояние аналогично к его исходному состоянию. Для таких анимаций цикла вам нужно заставить преобразование вернуться к исходному состоянию.

@keyframes coin-rotate { 
    0% { 
    transform: rotateY(0); 
    } 

    50% { 
    transform: rotateY(180deg); 
    } 

    100% { 
    transform: rotateY(360deg); 
    } 
} 

Answer 3

Вид хака, но если то, что вы хотите для анимации, чтобы плавно переходить вы можете сделать это:

CSS + HTML код:

.coin { 
 
     width: 100px; 
 
     height: 100px; 
 
     font-size: 0.5px; 
 
     animation: coin-rotate 8s infinite; 
 
     background: linear-gradient(to right, red 50%, black 50%); 
 
     border-radius: 100px; 
 
     } 
 
     
 

 
.a { 
 
    opacity: 0.1; 
 
    } 
 
     
 
@keyframes coin-rotate { 
 
         0% { 
 
          transform: rotateY(0deg); 
 
          transform-origin: 50% 5% 0; 
 
          } 
 
         100% { 
 
          transform: rotateY(360deg); 
 
          transform-origin: 50% 5% 0; 
 
          } 
 
         }

<div class="coin"><a>.</a></div>

Странно, если вы попытаетесь сделать t о

1. Удалить полную остановку
2. Установить размер шрифта на ноль или
3. Установите непрозрачность до нуля

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

Как вы можете видеть, что это только один раз одушевляет

Таким образом, вышеупомянутое решение должно, вероятно, исправить то, что кажется истинной проблемой, если только симптомом, а не общей проблемой.

Похоже, что в моем браузере, по крайней мере, процессор CSS, ответственный за обработку поворотов, проверял наличие «видимого объекта» и не учитывал свойство фона как «объект» для целей вращения, что вызывало сбой, когда анимация исчезла сбоку, что было против интуитивно понятным для наиболее логичного считывания кода.

Приведенный выше код примерно такой же красивый, как я мог бы это сделать на данный момент.

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

Надеюсь, это полезно!