Sample CSS3 Menu Animation

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 use to scale, rotate, or even skew an element without disturbing the content around it, while transition use 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:

Also read: 54 Beautiful HTML CSS Button Style, 33 Best HTML5 and CSS3 3D Demo Examples, 116 Useful CSS3 Tutorials Examples and Tricks for Designer

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://www.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://www.freshdesignweb.com"><img src="images/Green-RSS.png" title="RSS" /></a></li>
<li><a href="https://www.freshdesignweb.com"><img src="images/Orange-Mail.png" title="Mail RSS" /></a></li>
<li><a href="https://www.freshdesignweb.com"><img src="images/Purple-Shop.png" title="E-Shoping" /></a></li>
<li><a href="https://www.freshdesignweb.com"><img src="images/Black-User.png" title="User" /></a></li>
</ul>