Examples of CSS transform, transition, and animation

CSS3 is awesome stuff, especially getting into animated transitions and transformations. These examples are meant as a quick reference for those familiar with the basics of CSS. View the source code for notes and more information.

Rotate example

Here is a <pre> block rotated by -3 degrees.

.ex1 {
	transform:         rotate(-3deg); /* CSS3 */
	-moz-transform:    rotate(-3deg); /* Firefox */
	-webkit-transform: rotate(-3deg); /* Webkit */
	-o-transform:      rotate(-3deg); /* Opera */
	-ms-transform:     rotate(-3deg); /* IE 9 */
	}

Translate example

Here is a <pre> block translated to the right by 20px and translated down by 5px.

.ex2 {
	transform:         translate(20px,5px); /* CSS3 */
	-moz-transform:    translate(20px,5px); /* Firefox */
	-webkit-transform: translate(20px,5px); /* Webkit */
	-o-transform:      translate(20px,5px); /* Opera */
	-ms-transform:     translate(20px,5px); /* IE 9 */
	}

Scale example

Here is a <pre> block scaled up by a factor of 1.1.

.ex3 {
	transform:         scale(1.1); /* CSS3 */
	-moz-transform:    scale(1.1); /* Firefox */
	-webkit-transform: scale(1.1); /* Webkit */
	-o-transform:      scale(1.1); /* Opera */
	-ms-transform:     scale(1.1); /* IE 9 */
	}

Animation example (color)

Here is a <pre> block with animated background-color using @keyframes. Read more about CSS animation.

@keyframes ex4 { /* CSS3 */
	0%   { background-color: red;    }
	20%  { background-color: purple; }
	40%  { background-color: blue;   }
	60%  { background-color: green;  }
	80%  { background-color: yellow; }
	100% { background-color: orange; }
}
@-moz-keyframes ex4 { /* Firefox */
	0%   { background-color: red;    }
	20%  { background-color: purple; }
	40%  { background-color: blue;   }
	60%  { background-color: green;  }
	80%  { background-color: yellow; }
	100% { background-color: orange; }
}
@-webkit-keyframes ex4 { /* Webkit */
	0%   { background-color: red;    }
	20%  { background-color: purple; }
	40%  { background-color: blue;   }
	60%  { background-color: green;  }
	80%  { background-color: yellow; }
	100% { background-color: orange; }
}
.ex4 {
	color: #fff;
	animation:          ex4 5s infinite; /* CSS3 */
	 -moz-animation:    ex4 5s infinite; /* Firefox */
	 -webkit-animation: ex4 5s infinite; /* Webkit */
}

Advanced animation example (Webkit browsers only)

A more advanced example of 3D effects using -webkit-transform-style (hover to view as 2D).

-webkit-transform: translateZ(-100px) rotateY(45deg);

-webkit-transform: translateZ(50px) rotateX(20deg);

Animation with transition

Here is a <pre> block animated via transition properties (hover for animation).

.ex6 {
	background-color: #fcfcfc;
	
	-moz-transition: 
					background-color 500ms linear,
							   color 500ms linear;
	-webkit-transition: 
					background-color 500ms linear,
							   color 500ms linear;
	-o-transition: 
					background-color 500ms linear,
							   color 500ms linear;
	transition: 
					background-color 500ms linear,
							   color 500ms linear;
	}
.ex6:hover {
	background-color: #111;
	}

Multiple animations (transition and transform)

Here is a <pre> block with multiple animations using transition and transform. Hover the cursor over the center of the following code snippet to view the animation effect.

.ex7 {
	background-color: #fcfcfc;
	
	-webkit-transition: all 1.3s ease-in-out;
	-moz-transition:    all 1.3s ease-in-out;
	-o-transition:      all 1.3s ease-in-out;
	-ms-transition:     all 1.3s ease-in-out;
	}
.ex7:hover {
	background-color: rgba(255,204,51,0.7);
	
	-webkit-transform: rotate(360deg) scale(1.3);
	-moz-transform:    rotate(360deg) scale(1.3);
	-o-transform:      rotate(360deg) scale(1.3);
	-ms-transform:     rotate(360deg) scale(1.3);
	}

See also: CSS transition effect for links at WP-Mix.