DEV Community

Cover image for Css Shake Animation

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)

svgatorapp profile image

Great tip!

50 CLI Tools You Can't Live Without

The top 50 must-have CLI tools, including some scripts to help you automate the installation and updating of these tools on various systems/distros.