Анимация блока при hover?

Question

[todey]

Ребят у меня такой вопрос! как сделать анимацию блока при навидении? я говорю НЕ про transition transform, а про это

.animated { 
    -webkit-animation-duration: 1s; 
    animation-duration: 1s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
} 

@-webkit-keyframes fadeInDown { 
    0% { 
        opacity: 0; 
        -webkit-transform: translateY(-20px); 
    } 
    100% { 
        opacity: 1; 
        -webkit-transform: translateY(0); 
    } 
} 

@keyframes fadeInDown { 
    0% { 
        opacity: 0; 
        transform: translateY(-20px); 
    } 
    100% { 
        opacity: 1; 
        transform: translateY(0); 
    } 
} 

.fadeInDown { 
    -webkit-animation-name: fadeInDown; 
    animation-name: fadeInDown; 
}

Когда заходишь на сайт эта анимация работает, но как сделать такую же анимацию только при навидении? заранее спасибо!

Answer 1

[Евгений Воронин]

.animated:hover {
    -webkit-animation-name: fadeInDown; 
    animation-name: fadeInDown; 
}

jsfiddle.net/jaxxreal/r6hy0f0v