How you can Improve Your Website’s Interface With CSS3 Animations
As web standards are altering constantly and being increased, we see now that web browsers can do many more things than just exhibiting text and images. The particular era of having web webpages with just images and text is long gone and in order for you to be successful in this competitive area, you need to be very creative and endure out from the masses.
Animations on websites are great, and, a lot more web designers are using them to give some cool effects issues designs to enhance user experience and satisfaction.
Some years back, animated graphics could only be carried out with Javascript or using Adobe’s Flash but now the more recent version of CSS, CSS3, has introduced some new basic effects that are faster and lighter on browsers to create some cool animation.
On this tutorial, I am going to show you how to add some basic animation and effects on the images of your website. Together with CSS3’s new transform and transition features, using no Javascrit just CSS3, I will show how to spin images while zooming them.
This effect will give you a very good feedback animation for visitors when they hover their mouses over the images. Very first we need to choose which images we will give this effect and add a class name, let’s say: “animated”.
All of us, then, add the subsequent code:
. animated: hover
/* CSS3 standard */
transform:rotate(360deg) scale(1.3);
transition-duration:500ms;
transition-timing-function: ease-out;
/* safari / chrome */
-webkit-transform:rotate(360deg) scale(1.3);
-webkit-transition-duration:500ms;
-webkit-transition-timing-function: ease-out;
/* mozilla */
-moz-transform:rotate(360deg) scale(1.3);
-moz-transition-duration:500ms;
-moz-transition-timing-function: ease-out;
/* opera */
-o-transform:rotate(360deg) scale(1.3);
-o-transition-duration:500ms;
-o-transition-timing-function: ease-out;
/* ie 9 or above*/
-ms-transform:rotate(360deg) scale(1.3);
-ms-transform-duration:500ms;
-ms-transform-timing-function: ease-out;
position:relative;
z-index:99;
box-shadow: rgba(0,0,0,0.4) 0px 0px 10px;
-moz-box-shadow: rgba(0,0,0,0.4) 0px 0px 10px;
-webkit-box-shadow: rgba(0,0,0,0.4) 0px 0px 10px;
First things first, we rotate the image while scaling it at the same time, then we set some duration for people two animations with “transform-duration” and finally we explain to the browser which timing function to use.
Adding some shadow gives the illusion of the photographs to be floating after the turn and scaling, a nice touch to the animation.
You should note, because these CSS3 animations are fairly new in comparison to other features in CSS, each browser has different implementations as seen above, and you need to set them all, and of course, this doesn’t work with Internet Explorer 8 and bellow.
