Ryste animation med CSS
Med CSS koden nedenfor vil du kunne animere en et element, så det ryster. Det kunne, som i eksemplet herunder, være en mand der ryster, eller du kunne bruge det til noget andet, f.eks. hvis du gerne vil bringe noget opmæksomhed til et bestemt område af siden.
.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); } }
DEMO:
See the Pen "Shake" CSS snippet for CSS-Tricks by Sarah Drasner (@sdras) on CodePen.