Animación de fotogramas clave CSS "Agitar" - Trucos CSS

Anonim

Esto supone el uso de un prefijo automático.

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

Vea el fragmento de CSS Pen "Shake" para CSS-Tricks de Sarah Drasner (@sdras) en CodePen.