Встряхнуть изображение на hover с css?

Question

Я пытаюсь сделать изображение shake on hover с CSS3, но похоже, что у меня синтаксическая ошибка. Я пытаюсь применить эффект к css3.png и html5.png Я добавил классы id к изображениям, которые хотели бы иметь этот эффект.

Вот мой текущий HTML:

<div class="row"> 
    <div class="col-lg-2 col-lg-offset-2"> 
     <div id="img"> 
      <img class="img-responsive shake" src="img/html5.png"> 
     </div> 
    </div> 
    <div class="col-lg-3"> 
     <img class="img-responsive" src="img/and.png"> 
    </div> 
    <div class="col-lg-2"> 
     <div id="img"> 
      <img class="img-responsive shake" src="img/css3.png"> 
     </div> 
    </div> 
</div> 

вот CSS:

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

@-webkit-keyframes shake { 
    from, to { 
    -webkit-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0); 
    } 

    10%, 30%, 50%, 70%, 90% { 
    -webkit-transform: translate3d(-10px, 0, 0); 
    transform: translate3d(-10px, 0, 0); 
    } 

    20%, 40%, 60%, 80% { 
    -webkit-transform: translate3d(10px, 0, 0); 
    transform: translate3d(10px, 0, 0); 
    } 
} 

@keyframes shake { 
    from, to { 
    -webkit-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0); 
    } 

    10%, 30%, 50%, 70%, 90% { 
    -webkit-transform: translate3d(-10px, 0, 0); 
    transform: translate3d(-10px, 0, 0); 
    } 

    20%, 40%, 60%, 80% { 
    -webkit-transform: translate3d(10px, 0, 0); 
    transform: translate3d(10px, 0, 0); 
    } 
} 

Answer 1

Чтобы получить эффект на парении, вы должны включать в себя: селектор парения в вашем CSS: http://www.w3schools.com/cssref/sel_hover.asp

.shake img:hover { 
     ***code*** 
    } 

Answer 2

Ваша проблема в том, что .shake вызывает div, который вы не используете в своем HTML. Во-первых, возьмите пробелы из ваших классов Div, это плохо именовании ... Тогда звоните эти дивы вместо «.shake» Было бы ближе к этому

# .img-responsive-shake{ 
    enter code here 
} 

Answer 3

Попробуйте заменить

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

с этим CSS.

.shake:hover { 
    -webkit-animation-name: shake; 
    animation-name: shake; 
    -webkit-animation-duration: 2s; 
    animation-duration: 2s; 
}