DEV Community

Cover image for Css Shake Animation
alexpaper
alexpaper

Posted on

Css Shake Animation

I've always liked the shaking effect on the login screen on Linux
or Mac systems, yes, but how to make a similar effect through CSS?
In a few lines of code!

.card {
    ...
    animation: shake 1s ease-in-out forwards;
}
@keyframes shake {
    0%,100% {
        transform: translate(0, 0);
    }
    10%,30%,50%,70%,90% {
        transform: translate(30px);
    }
    20%,40%,60%,80% {
        transform: translate(-30px);
    }
}
Enter fullscreen mode Exit fullscreen mode

In this video guide you can see how to create a super ultra simple shaking effect
via CSS ...
Video Guide
🆗 👋

Top comments (1)

Collapse
 
svgatorapp profile image
SVGator

Great tip!