Examples of CSS3 transform, transition, and animation

CSS is awesome stuff, especially getting into animated transitions and transformations.

These examples are meant as a quick reference for those familiar with CSS3 syntax.

rotate example

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

.ex1 {
 transform:         rotate(-7deg); /* CSS3 */
 -moz-transform:    rotate(-7deg); /* Firefox */
 -webkit-transform: rotate(-7deg); /* Webkit */
 -o-transform:      rotate(-7deg); /* Opera */
 -ms-transform:     rotate(-7deg); /* 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 by a factor of 1.3.

.ex3 {
 transform:         scale(1.3); /* CSS3 */
 -moz-transform:    scale(1.3); /* Firefox */
 -webkit-transform: scale(1.3); /* Webkit */
 -o-transform:      scale(1.3); /* Opera */
 -ms-transform:     scale(1.3); /* 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: green; }
	50%  { background-color: yellow; }
	100% { background-color: #efefef; }
}
@-moz-keyframes ex4 { /* Firefox */
	0%   { background-color: green; }
	50%  { background-color: yellow; }
	100% { background-color: #efefef; }
}
@-webkit-keyframes ex4 { /* Webkit */
	0%   { background-color: green; }
	50%  { background-color: yellow; }
	100% { background-color: #efefef; }
}
.ex4 {
	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 {
	color: black; background-color: #efefef; text-shadow: none;
	-moz-transition: 
		background-color 700ms linear,
			   color 700ms linear;
	-webkit-transition: 
		background-color 700ms linear,
			   color 700ms linear;
	-o-transition: 
		background-color 1000ms linear,
			   color 700ms linear;
	transition: 
		background-color 1000ms linear,
			   color 700ms linear;
	}
.ex6:hover {
	color: white; background-color: black; text-shadow: none;
	}

multiple animations (transition and transform)

Here is a <pre> block with multiple animations using transition and transform.

.ex7 {
	background-color: #efefef;
	-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.