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

#css #веб_программирование

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

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


    

Ответы

Ответ 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))}
}



Ответ 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);
}