DEV Community

Cover image for Css Shake Animation
alexpaper
alexpaper

Posted on

4 2

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!

Image of Docusign

πŸ› οΈ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more