We are all familiar with the iPhone wiggle effect that happens when you hold your finger on an icon for a second, and this helpful video tutorial shows you how to do it entirely through CSS.
Before we jump into this CSS tutorial we need to touch on a very important thing to always keep in mind, especially when using a more advanced CSS3 feature like keyframe animations. Be sure to check on browser compatibility and support for the latest updates on which CSS features can be used with which browser versions. You can do so here http://caniuse.com.
Now let’s take a look at how to accomplish this awesome little animation. The basic idea is to create an animation that moves the target icon a couple degrees in either direction by calling the Z axis into action. You set a period of time the effect needs to last and how fast the animation needs to move, and your done.
Here is an example of what your CSS code may look like if you are following along with the video.
@-webkit-keyframes wiggle {
from {-webkit-transform: rotateZ(2deg);}
50% {-webkit-transform: rotateZ(-2deg);}
to {-webkit-transform: rotateZ(2deg);}
}
.productBox {
-webkit-animation-name: wiggle;
-webkit-animation-duration: .4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease;
}
You can, of course, adjust the timing and degree of the wiggle to your liking quite easily. You can also apply this to other elements in websites and apps, all through just using CSS!
We hope this lesson in CSS3 keyframe animation was helpful for you. Before you leave, you will probably also really enjoy this tutorial on how to create the perfect image crossfade with CSS3 transitions. Thanks for stopping by!