Shake effect for galleries/folders

lightbox32lightbox32 DallasPosts: 1Registered Users Beginner grinner
Hello everyone. I thought I'd share this interesting "shake" effect that I built, based on the work by Sarah Drasner (css-tricks.com/snippets/css/shake-css-keyframe-animation/).

It only uses CSS, and causes the images to "shake" when you hover over them.

You can see an example of the effect at www.otherdayslight.com/Shake. To make it work you add the following to a CSS block:

.sm-tile:hover {
animation: shake 1s cubic-bezier(.26,.37,.69,.67) both;
}

@keyframes shake {
10%, 90% {
transform: rotate(-.4deg);
}

20%, 80% {
transform: rotate(.4deg);
}

30%, 50%, 70% {
transform: rotate(-.8deg);
}

40%, 60% {
transform: rotate(.8deg);
}
}

Comments

  • ShotByTomShotByTom Beginner grinner IndianapolisPosts: 2Registered Users Beginner grinner
    Very cool!! Thank you for making this so easy!
Sign In or Register to comment.