Cool animation effect using pure CSS transitions and some more CSS3 properties

March 20, 2012 Css3 & Html5

This is not a tutorial about CSS transition effect and does no pretend to show the functionality of this CSS property. But anyway, if few words the css transition effect provide a way to control the speed of animation changes to CSS properties.

For example, if you change the color of an element from white to black, normally the change is instantaneous. With CSS transitions enabled, the change occurs over an interval of time you can specify, following an acceleration curve you can customize.

So lets return to the beautiful transition effect i was telling you. I´ve just seen this effect on Joomla control panel and I thought its just awesome. If you are using Joomla you know what I’m talking about. If not, here you can see a demo. So I tried to reproduce the transition effect on mouse hover. The css properties I use to achieve this cool effect are:

  • css transition
  • css border shadow
  • css border radius

and added

  • css rotate
  • css positioning
  • css before
  • css after

Like I said Joomla uses a transition for the shadow and border properties to achieve the on hover animation, but I played a little bit more adding rotate effect, position animation, and I combined with a strange effect using the css “before” and “after” properties.

Please note that the CSS transition property is still in draft and is not supported by Internet Explorer. On the other hand, Firefox requires the prefix -moz-, Chrome and Safari requires the prefix -webkit- Opera requires the prefix -o-.

Playing around with CSS properties like “after’ and “before” it turn out to be peaty awesome. I have also did some testing with the “rotate” css property witch is quite cool.

See it for your self. Here is the CSS code

div {float: left;}

.bg1 {background: url(img/CSS3-logo.jpg) center center no-repeat; width:200px; height:150px;}
.bg2 {background: url(img/android-logo.jpg) center center no-repeat; width:200px; height:150px;}
.bg3 {background: url(img/css3_logo.jpg) center center no-repeat; width:200px; height:150px;}
.bg4 {background: url(img/logo-html5-css3.jpg) center center no-repeat; width:200px; height:150px;}

.position {
	position:relative;
	top:0;
}
.border {	
	border:#CCCCCC 1px solid;
	-webkit-border-radius: 5px;/* WebKit */
	 -khtml-border-radius: 5px;/* Firefox */
	   -moz-border-radius: 5px;/* Opera */
			border-radius: 5px;/* Standard */
}
.transition {	
	-webkit-transition: all 1s ease;/* WebKit */
	   -moz-transition: all 1s ease;/* Firefox */
		 -o-transition: all 1s ease;/* Opera */
			transition: all 1s ease;/* Standard */				
}
.position:hover {
	position:relative;
	top:-10px;
}
.rotate:hover {
	-webkit-transform: rotate(10deg);/* WebKit */
	   -moz-transform: rotate(10deg);/* Firefox */
		 -o-transform: rotate(10deg);/* Opera */
			 ransform: rotate(10deg);/* Standard */
}
.shadow:hover {		 
	-webkit-box-shadow: -10px 10px 35px #888;/* WebKit */
	   -moz-box-shadow: -10px 10px 35px #888;/* Firefox */
		 -o-box-shadow: -10px 10px 35px #888;/* Opera */
			box-shadow: -10px 10px 35px #888;/* Standard */
}
.border:hover {
	-webkit-border-bottom-left-radius:70px 20px;/* WebKit */
	   -moz-border-bottom-left-radius:70px 20px;/* Firefox */
		 -o-border-bottom-left-radius:70px 20px;/* Opera */
			border-bottom-left-radius:70px 20px;/* Standard */
}

And here is a pice of the the HTML code.

<div class="bg1 border transition shadow position rotate"></div>
<div class="bg2 border transition shadow position rotate"></div>
<div class="bg3 border transition shadow position rotate"></div>
<div class="bg4 border transition shadow position rotate"></div>

See some more advanced examples here.

DEMO | Download source CODE

CSS3,

3 Responses to “Cool animation effect using pure CSS transitions and some more CSS3 properties”


Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>