Recently we developed a simple Twitter widget for WordPress. I wanted to bring a little life into it so I created an animated Bird that moves each time you hover over the certain Tweet in the widget. This is a very simple CSS3 trick and doesn’t need any advanced knowledge of HTML or CSS. I recommend that you download the source files first and check the live demo. Simply move your mose over the bird to see the effect.
LIVE DEMO
[download id=”160″]
SETTING UP THE BIRD
Check the image twitterBirdIconAnimate.png first. You will notice that it consists of two bird icons. We will simply animate this image left and right. First we have to add the two classes in our html file. The outside class will create an area in which the birds will move. Hidden overflow will hide the bird that appears on the left side of the image. Simply add the following code into index.html:
We can now set the CSS for our little animation. First we have to create the zone in which the birds will move. Add following code into your style.css file:
.outsideTwitter{
display:block;
float:left;
width:28px;
height:20px;
overflow:hidden;
margin:0;
}
Width should be exactly 50% of the total image width. Since image width is 56px, we set it to 28px in class .outsideTwitter. The most important parameter is overflow which will hide the image outside our 28px wide area. If you check the index.html file now, you will notice that only the black bird is displayed. Try deleting the line overflow:hidden; and test it again. You will notice that both birds are displayed if we do not set the overflow to hidden.
SETTING UP THE ANIMATION
All we have to add now is actually add the bird image and add animation effect to it. It is actually pretty simple. Add the following code to your style.css file:
.twitterBird{
float:left;
width:56px;
height:20px;
background:url(“twitterBirdIconAnimate.png”);
margin-left:-28px;
cursor:pointer;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
We set the full width here since we need both birds to display at some point. Overflow from the previous class will take care of the rest. Webkit animation is actually pretty simple. We set the animation to all (that means all aspects of the class will be animated) and set the time to 0.4 seconds. We will use an ease-in-out easing to achieve a nice smooth transition. And we are done with our fancy little animation. Run the index.html and check it out.
CONCLUSION
Simple CSS3 animations can add a little spark of life to your websites. This animation is really simple but will make your website just a little more dynamic and diverse.
Please note that these animations are only supported in webkit browsers (Chrome, Opera). In our future tips&tricks posts I will show you how to make gradients, apply animations to images and much more so stay tuned!
[download id=”160″]
You must be logged in to post a comment.