I recently did some work with css3 Transition, this is something i've done many times before (hit and miss) so I decided to write a quick blog post on the subject and incorporate the use of sass and compass.
So this is what I came up with, html:
and the sass:
@include transition(left, 0.5s)
width : 100px
height : 100px
background-color : red
position : relative
left : 0px
cursor : pointer
left : 20px
With the use of compass we can use the transition mixing which will help us to inject all the browser specifications with one line.
The transition will listen out for any changes which occur to this element and the style we have chosen so in this case, left.
When the hover state occurs the transition will be fired and the element will move 20px to the left. Simple.
Transition are simple to use, as you can see I wrote all of one line and achieved something very subtle which could greatly enhance the design of the site.
~~Transition are hardware accelerated meaning they will come across smoother on devices.~~
What i've done is pretty simple. Over the next few months I plan to put together more transition pieces and see how far I can go with just css.
As highlighted to me by Adam im wrong on this (harware acceloration) and will follow up with another example once I've had time to look into it further.