View source

Use this CSS property to define a set of CSS properties that, when changed via JavaScript, will cause the element to animate its transition to the new state, rather than adjusting instantateously. You must also set -webkit-transition-duration to a non-zero duration.

This property can be used in conjunction with -webkit-transform. Suppose you have an arrow graphic that points upwards, and the following CSS:

<code css>
.arrow {
  -webkit-transition-property: -webkit-transform;
  -webkit-transition-duration: 1s;
}

.arrow.pointing-right {
  -webkit-transform: rotate(90deg);
}

.arrow.pointing-left {
  -webkit-transform: rotate(270deg);
}
</code>

When an element with class "arrow" gets the added classes "pointing-left" or "pointing-right", it will smoothly rotate to the position dictated by -webkit-transform. If the pointing class is removed in mid-transition, the arrow will smoothly revert back to pointing upward.

The downside to transitions is that it is difficult to cancel the animations, and there is no event fired when the animation is completed (this is a feature in WebKit 4, and the current version of webOS uses WebKit 3).