Анимация об изменении изображения css jquery

Question

У меня есть социальные кнопки, которые меняют изображение при наведении. Он работает отлично

Fiddle

<a href="#"> 
    <img src="http://i.imgur.com/TLGeYXo.png" class="social-icons social-fb "/> 
</a> 

Мой CSS:

.social-fb:hover { 
    content:url("http://i.imgur.com/bU0lzac.png"); 
} 

Но как я могу сделать некоторые анимации Ot это нравится, когда я зависать и как изменение изображения, есть анимация. Любая анимация будет делать. Благодаря!

Answer 1

Вы можете использовать следующий CSS, чтобы сделать импульс:

.social-fb:hover { 
 
    content: url("http://i.imgur.com/bU0lzac.png"); 
 
    -webkit-animation-name: pulse; 
 
    animation-name: pulse; 
 
    -webkit-animation-duration: 1s; 
 
    animation-duration: 1s; 
 
    -webkit-animation-fill-mode: both; 
 
    animation-fill-mode: both; 
 
} 
 
@-webkit-keyframes pulse { 
 
    from { 
 
    -webkit-transform: scale3d(1, 1, 1); 
 
    transform: scale3d(1, 1, 1); 
 
    } 
 
    50% { 
 
    -webkit-transform: scale3d(1.05, 1.05, 1.05); 
 
    transform: scale3d(1.05, 1.05, 1.05); 
 
    } 
 
    to { 
 
    -webkit-transform: scale3d(1, 1, 1); 
 
    transform: scale3d(1, 1, 1); 
 
    } 
 
} 
 
@keyframes pulse { 
 
    from { 
 
    -webkit-transform: scale3d(1, 1, 1); 
 
    transform: scale3d(1, 1, 1); 
 
    } 
 
    50% { 
 
    -webkit-transform: scale3d(1.05, 1.05, 1.05); 
 
    transform: scale3d(1.05, 1.05, 1.05); 
 
    } 
 
    to { 
 
    -webkit-transform: scale3d(1, 1, 1); 
 
    transform: scale3d(1, 1, 1); 
 
    } 
 
} 
 
.pulse { 
 
    -webkit-animation-name: pulse; 
 
    animation-name: pulse; 
 
}

<a href="#"> 
 
    <img src="http://i.imgur.com/TLGeYXo.png" class="social-icons social-fb " /> 
 
</a> 
 

 
<a href="#"> 
 
    <img src="http://i.imgur.com/bU0lzac.png" /> 
 
</a>

JSFiddle

Answer 2

Там много различных анимаций, которые можно сделать, я создал простое вращение один here

Трюк состоит в том, чтобы включить атрибут перехода на элемент перед определением это парить состояние:

.social-fb{ 
    transition: 750ms ease-in-out; 
} 

750ms является продолжительность анимации и ease-in-out является установка ослабления, что делает его выглядеть более гладкой и более реалистичным.

Затем установите преобразования/анимацию вы хотели бы, здесь я вращающийся значок 360 градусов

.social-fb:hover { 
    content:url("http://i.imgur.com/bU0lzac.png"); 
    transform: rotate(360deg); 
} 

Это также стоит посмотреть, начиная использовать Font Awesome иконки вместо изображений для вещей, как иконы facebook, они бесплатны, отлично масштабируются, загружаются быстрее, чем изображения, и вы также можете получить фон, чтобы исчезнуть от цвета до следующего, check out this pen to see an example