Animation using CSS 3

New CSS properties introduced by webkit allows us to animate DOM object to animate using CSS3.
Property: transition

Transitions are specified using the following properties:
transition-property – What property should animate, e.g., opacity.
transition-duration – How long the transition should last.
transition-timing-function – The timing function for the transition (e.g., linear vs. ease-in vs. a custom cubic bezier function).
transition – A shorthand for all three properties.

This is a very simple example:
div.text {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  background-color: maroon;
  color: white;
  -webkit-transition: all 500ms linear;
  border: 10px solid black;
}

div.text:hover {
  border: 20px solid blue;
}
This div will animate when hovered over. In browsers that do not support this animation, there will be graceful animation, as the borders will get thick immediately.