CSSのテキストアニメーションを画像に適用できますか？

Question

私は画像に揺れのアニメーションを取得しようとしています。 テキストでは機能しますが、画像では機能しません。ここで何か助けが必要です。

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

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

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

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

Answer 1

代わりにこれを試してください。

.shake:hover { 
 
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both; 
 
    transform: translate3d(0, 0, 0); 
 
    backface-visibility: hidden; 
 
    perspective: 1000px; 
 
} 
 

 
@keyframes shake { 
 
    10%, 90% { 
 
    transform: translate3d(-1px, 0, 0); 
 
    } 
 
    
 
    20%, 80% { 
 
    transform: translate3d(2px, 0, 0); 
 
    } 
 

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

 
    40%, 60% { 
 
    transform: translate3d(4px, 0, 0); 
 
    } 
 
}

<div class="shake"> 
 
<img src="https://placeholdit.co//i/555x150"> 
 
</div>

Answer 2

それはイメージで動作します。あなたの問題は、アニメーションの期間を定義しないことです。

これを試してみてください：

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

または簡略版：

.shake:hover { 
    animation: shake 2s; 
} 

デモ：jsfiddle