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.