Sunday, 29 July 2012

TRANSITIONING ALL POSSIBLE PROPERTIES In CSS3

An alternative to listing multiple properties is using the all
value. This will transition all available properties.
Let’s drop all into our simple example instead of listing
background and color separately. They’ll now share the
same duration and timing function.


a.foo {
  padding: 5px 10px;
  background: #9c3;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all  0.3s ease;
  }
a.foo:hover,
a.foo:focus {
  color: #030;
  background: #690;
  }
This is a convenient way of catching all the changes that hap-
pen on :hover, :focus, or :active events without having to
list each property you’d like to transition.