This segment on CSS3 will review transitions and transform, two properties which add animation effects. What typically has involved a lot of JavaScript in the past for dynamic graphics can now can be coded with CSS animation properties.

Transitions

CSS3 Transitions are part of the W3C Working Draft officially titled the CSS Transitions Module Level 3. It provides the specification that allows property changes in CSS values to occur smoothly when changed from one value to another over a specified duration.

According to the transitions property, when the value of a CSS property changes, the rendered result is instantly updated, and the affected elements immediately change from the old property value to the new property value. This section of the specification describes a way to stipulate transitions using new CSS properties.

CSS3 transitions actually involve several properties which are defined for the transition-property: the transition-duration, the transition-timing-function, transition-delay, and transition, which is the shorthand method of all four properties.

The transition-property accepts a comma-separated list of values allowing multiple transitions to be defined with each acting on a different property and specifying which property should be animated, for example, opacity, left, top, width. The syntax for representing the transition-property is as follows:

transition-property: none | all | 'property'

Here are the values explained:

  • None: There is no transition applied.
  • All: Every property that is able to undergo a transition will do so; otherwise, a list of exact specified properties to be transitioned is given.

Below, is an example of the transition-property, which shows a paragraph with a solid 4px border with 400px width and all textual contents to transition on hover with a linear opacity that fades over a period of 2 seconds to complete the transition. The CSS3 transitions property is still considered experimental; therefore, the prefixes for -moz, -webkit, and -o are provided for Firefox, Safari, Chrome, and Opera respectively:

p {
      border: 4px solid #CC33CC;
      width: 400px;
      padding: 5px;
}
.transition_example {
  opacity: 1;
  -moz-transition: opacity 2s linear;
  -webkit-transition: opacity 2s linear;
  -o-transition: opacity 2s linear;
  transition: opacity 2s linear;
}
.transition_example:hover {
  opacity: 0;
}

Here is the HTML used:

<!-- Transition Examples -->
     <span>Mouse over the paragraph below to demonstrate the onhover transition effect.</span>
   <p class="transition_example">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean egestas blandit ipsum. </p>

This example results in the gradual fading of the element as displayed in Figure A with several progressive screen captures of the transition from the initial setting, then after 1 second, and then the final, as displayed within Chrome 14.0.8:

Figure A

A working example of this transition can be viewed in Firefox and Chrome from the link provided at the end of this blog post.

For the hover effect demonstrated above, when the mouse moves out of the element, it will reverse the effect, so that any time the property changes value the animation will simply start again with the current position as the from value and the new value as the target. Two key tips to remember about transitions: they are intrinsic animations; as such, any scripts and stylesheets can be written as usual and the animations will simply occur unconditionally as the properties change values. And they degrade gracefully, in cases where browsers do not support transitions, the elements plainly will not animate, otherwise all code and style properties can remain.

Animation of property types describes how each property type undergoes transition or animation; the list of thirteen includes color, length, percentage, integer, visibility, shadow, gradient, paint server, and a shorthand property. The transition property can be applied to many properties from CSS, and they are displayed by property name and type in the CSS Transitions Module Level 3 Properties from CSS Table.

Transform

The -webkit- for Safari and Chrome has added a nifty transition and transform property effect. In the next example, this effect will render animage with a simple spin effect. Here is the image source code:

<img src="images/Figure_B.gif" style="-webkit-transition: -webkit-transform 3s ease-in" onclick="this.style.webkitTransform='rotate(360deg)'">

Figure B is the gif image:

The following HTML with the styling webkit prefixes for Chrome and Safari includes a transition and a transform effect with a 3 second ease-in and defined 360 degree rotation:

<img src="images/Figure_B.gif" style="-webkit-transition: -webkit-transform 3s ease-in" onClick="this.style.webkitTransform='rotate(360deg)'">

Figure C (left) shows the rotation that occurs as a graphic; for reference, I have added a dark blue dot to aid in following along in the sequence of the image as it rotates 360° in a clockwise spin during the transition and transform effect as displayed in Chrome 14.0.8. The working example of the image rotation effect can be demonstrated live from the link provided at the end of this blog post in Safari and Chrome.

Next is another example of the same transform effect applied to a paragraph using the following HTML:

 <p style="-webkit-transition: -webkit-transform 3s ease-in" onClick="this.style.webkitTransform='rotate(360deg)'">This paragraph will spin upon first click!</p>

Figure D below shows the result in Chrome 14.0.8; the paragraph will spin 360° in a clockwise rotation once clicked:

The example above can be demonstrated from the link provided at the end of this blog post in the Chrome browser.

One more transform example demonstrates rotating an element 90° with it’s origin at the bottom left. This example uses the Firefox prefix in the following CSS3:

.transform_example {
      -moz-transform: rotate(90deg);
      -moz-transform-origin: bottom left;
}

Here is the HTML used:

<article class="transform_example">
<p>This paragraph is rotated 90 degrees!</p>
</article>

Figure E (right) shows the results in Firefox 7.0.1:

To view the examples above in HTML, download the Zip file from this link, which contains the CSS code, images, and HTML. Note that not every example works in every browser – view in the browsers as noted above for each example.

Future CSS3 segments will feature more properties which can be implemented today or in the near future, and I will also review modernizer which is a great way to incorporate IE support for CSS3 and HTML5 using JavaScript.

Also: