Анимация вращения на CSS

90
07 мая 2021, 16:10

Хочу сделать такую же анимацию вращения с помощью CSS, но у меня получается она только в одну сторону.

Как сделать, чтобы она вращалась от 60deg до -60deg и плавно возвращалась от -60deg до 60deg?

Answer 1

Вам поможет @keyframes, так же я добавил переменную для значения угла.

.rot { 
  animation: rotation 0.5s linear infinite; 
  width: 50px; 
  height: 50px; 
  border: solid; 
  margin: 20px; 
  --angle: 60deg; 
} 
 
@keyframes rotation { 
    0% {transform: rotate(var(--angle))} 
   50% {transform: rotate(calc(var(--angle) * -1))} 
  100% {transform: rotate(var(--angle))} 
}
<div class="rot"></div>

Answer 2

Вариант решения.

Немного не то, что просил автор, но мне показалось, что интересно выглядит.

Анимация наклона головы начинается по наведению мышки. 

.container { 
width:300px; 
height:300px; 
padding:1em; 
background-color:black; 
} 
img { 
  border-radius: 50%; 
  -webkit-transition: -webkit-transform .15s ease-in-out; 
          transition:         transform .15s ease-in-out; 
} 
img:hover { 
  -webkit-transform: rotate(30deg); 
          transform: rotate(30deg); 
}
<div class="container"> 
<img src="https://i.stack.imgur.com/bwF2L.jpg" /> 
 </div>

READ ALSO
Textarea горизонтальные линии
CSS

Textarea горизонтальные линии

 110
Вывод 2D с поворотом в Irrlicht
c++

Вывод 2D с поворотом в Irrlicht

Возможно ли это?

 71
Как параметры из одного макроса использовать во втором?
c++

Как параметры из одного макроса использовать во втором?

Есть два макроса, определённых в заголовочном файле:

 81
Что такое zstring в C++ и где его взять?
c++

Что такое zstring в C++ и где его взять?

В одном из разделов Cpp core guidlines говорится о загадочных строковых типах zstring и czstring и преимуществах их использования перед классическими char *Не смог...

 110