Sample CSS3 Menu Animation

, by , CSS3

CSS3 transform and transitions

This Tutorial and Sample will show you how to use menu CSS3’s transform and transition properties make it possible to manipulate elements in a variety of ways using just CSS. CSS transform is used to scale, rotate, or even skew an element without disturbing the content around it, while transition is used to animate CSS properties into view.

The two properties are supported in modern versions of Safari, Chrome, Mozilla 3.5+, and Opera 9.5+ in varying degrees. With that brief introduction out of the way, the following uses CSS3’s transform and transition properties to “bloat up” an image when the mouse rolls over it, and return it to its original state when rolled out of:

Sample 1

View demo | [download id=”34628″]

Sample 2

View demo | [download id=”34630″]

tutorial Sample 1

1. Copy code Style bellow past before </head>

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: https://freshdesignweb.com/style/ */
body{padding:50px; }
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}

.bubblewrap li{
display:inline;
width: 65px;
height:60px;
}

.bubblewrap li img{
width: 55px; /* width of each image.*/
height: 60px; /* height of each image.*/
border:0;
margin-right: 12px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}

.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}
</style>

2. Copy Code Bellow Past Before </body>

<ul>
<li><a href="#"><img src="images/Black-Open.png" title="Block" /></a></li>
<li><a href="https://freshdesignweb.com"><img src="images/Green-RSS.png" title="RSS" /></a></li>
<li><a href="https://freshdesignweb.com"><img src="images/Orange-Mail.png" title="Mail RSS" /></a></li>
<li><a href="https://freshdesignweb.com"><img src="images/Purple-Shop.png" title="E-Shoping" /></a></li>
<li><a href="https://freshdesignweb.com"><img src="images/Black-User.png" title="User" /></a></li>
</ul>

Related

30 Beautiful HTML CSS3 Social Media Buttons

78+ Free jQuery CSS3 Image Hover Effects Tutorials

90+ Free CSS HTML Login Form Page Templates

60 Beautiful HTML CSS Sign up & Registration Form Templates

67+ jQuery CSS3 Animation Examples Like Flash Animation

Written by

Graham Bill is a professional web designer and developer for both WordPress, Joomla and platform for eCommerce websites.

Feedback Leave a comment

Leave a Reply

Your email address will not be published. Required fields are marked *