[ css ] shake

.face:hover {
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}

@keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}

20%, 80% {
transform: translate3d(2px, 0, 0);
}

30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}

40%, 60% {
transform: translate3d(4px, 0, 0);
}
}

NOTE : rather than translate3d, the scale3d and rotate3d can also be defined.

scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);

from to can also be identified

from, to {

transform: scale3d(1, 1, 1);

}

NOTE:

div {

animation-duration: 750ms;

}

ref : https://css-tricks.com/snippets/css/shake-css-keyframe-animation/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s