CSS Tutorial

CSS3 Transitions, Transformations, & Animation

Transformations

Transformations are distortions. Values are "skew", "scale", "rotate", and "translate". Types can be combined too.

.skew {transform: skew(30deg);}
.scale {transform: scale(2,1);}
.rotate {transform: rotate(30deg);}
.translate {transform: translate(10px, 20px);}
.all {transform: skew(30deg) scale(2,1) rotate(30deg) translate(10px, 20px);}

To skew or rotate you supply the degrees. To scale you supply the beginning and ending amounts. "1,2" would mean start at 100% size and scale to 200%. Translating is done with two coordinates, the former is the distance down, and the latter the distance across. It is similar to relative positioning. In the following examples a border has been placed around these containers.

Here is a container with text that is skewed.

Here is a container with text that is scaled.

Here is a container with text that is rotated.

Here is a container with text that is translated.

Here is a container with text that is skewed, scaled, rotated, and translated.

Transitions

Hover states in CSS are instantaneous. A CSS transition applies a time lapse for the hover. With a transition you supply 3 values: the thing transitioned, the time unit, and the method of transitioning. The transition properties are "transition-property", "transition-duration", "transition-timing-function", "transition-delay".

"transition-property" provides a name for the property to which the transition is applied. Other values are "all" and "none". "transition-duration" is usually specified in seconds such as "1.5s". "transition-timing-function" has several values: ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(x, x, x, x). This allows you to change speed over the duration of the transition. "transition-delay" specifies the delay before the transition begins.

The following sample is a property shortcut. "all" is the property, "1s" is the duration, and "ease-in-out" is the timing-function. (Note that this does not really work in Firefox, except for the beta relaease of Firefox4.) Hover over the box to see the color changes.

.transitionExample {transition: all 1s ease-in-out; background-color: #444;} 
.transitionExample:hover {background-color: #fc3; color: #000;}

Here is a little box to be transitioned. Hover over me.

Here is the same transition combined with a transformation.

.transitionTransformationExample {transition: all 1s ease-in-out; background-color: #444;} 
.transitionTransformationExample:hover {background-color: #fc3; color: #000; transform: rotate(360deg) scale(1.5);}

Here is a little box to be transitioned. Hover over me.

Animation

I am not going to enter much into the argument that animation is an event and thus should be controlled by JavaScript, or that CSS3 animations are the new blink tag. CSS Transitions are two-stated. There is a start point and an end point, with a single transition in between. CSS Animations allow you to set several interim points using a keyframe at-rule, which at the time of this writing is only supported by webkit. If you hover over the main navigation buttons at the top of this site in Safari or Chrome, you will see an animation, which is just a series of transitions. Here is the CSS.

@-webkit-keyframes linkHover {
 from {color: #FFF; background-color: #3f6035; border: 1px solid #333;}
  50% {color: #000; background-color: rgba(180, 180, 50, 0.2); border: 1px solid #999;}
  to {color: #FFF; background-color: #3f6035; border: 1px solid #333;}
}
	
header nav ul li a:hover {
  -webkit-animation-name: linkHover;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
}

The keyframes sets the start, middle, and end points. Additional points could have been added. The next statement looks much like the transition statements we saw above. The animation is first named with the "-webkit-animation-name" property. Then the duration is set. The "-webkit-animation-iteration-count" takes a finite number or the value "infinite".