Как анимировать иконку?

Question

у меня на фидле сейчас не совсем так

 <div class="services__item">
   <div class="services__icon">
     <img src="http://s1.iconbird.com/ico/2013/9/446/w512h5121380376664MetroUIPhone.png" alt="pic1">
   </div>
   <p class="services__title">Консультаційні послуги</p>
 </div>

 <div class="services__item">
   <div class="services__icon">
     <img src="http://s1.iconbird.com/ico/2013/9/446/w512h5121380376664MetroUIPhone.png" alt="pic1">
   </div>
   <p class="services__title">Консультаційні послуги</p>
 </div>

Answer 1

.services__icon img {
  transition: .3s;
}
.services__icon img:hover {
  transform: rotate(360deg);
}

<div class="services__item">
   <div class="services__icon">
     <img src="http://s1.iconbird.com/ico/2013/9/446/w512h5121380376664MetroUIPhone.png" alt="pic1">
   </div>
   <p class="services__title">Консультаційні послуги</p>
 </div>

Answer 2

Например: HTML:

    <i class="fa fa-spinner fa-spin"></i>

Это будет розворот А например можно через класс: HTML:

    <i class="fa fa-spinner"></i>

CSS:

    .fa-spinner {
      color: red;
      -webkit-animation: rotate 4s infinite linear;
    }
    @-webkit-keyframes rotate {
      from {
        transform: rotateZ(0deg);
      }
      to {
        transform: rotateZ(360deg);
      }
    }

Пример

БЛОГ НА HUSL

Как анимировать иконку?

Ответы (2 шт):