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

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

Comments

[SVGator]

Great tip!