Options
Shake effect for galleries/folders
lightbox32
Registered Users Posts: 1 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);
}
}
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);
}
}
Tagged:
0
Comments