Cool CSS animation effects using transitions, rotations and postioning

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:

 

And here is a piece of the HTML code.

See Demo here

Leave a Reply

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