Animação de quadro-chave CSS "Shake" - CSS-Tricks

Anonim

Isso pressupõe o uso de um autoprefixer.

.face: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); ) )

Veja o snippet CSS da Caneta “Shake” para CSS-Tricks de Sarah Drasner (@sdras) no CodePen.