CSS3 Animations

---

https://github.com/LeaVerou/prefixfree https://github.com/Modernizr/Modernizr

CSS transition

-webkit-transition: [shorthand for the below, but only one CSS property can be in this list]
-webkit-transition-property: all [multiple CSS properties allowed, separated by commas]
-webkit-transition-duration: [example values: 1s 500ms]
-webkit-transition-timing-function: [default ease-in ease-out ease-in-out linear cubic-bezier]

example properties that can be animated

left, right, top, bottom, margin, border, padding
opacity
-webkit-transform: rotate, rotateX, rotateY, rotateZ, translateX, translateY, translateZ, scale, skew
-webkit-transform-style: preserve-3d, flat

CSS3 3D

To activate 3D space, an element needs perspective.

perspective( 500px );

3D transforms use the same transform property used for 2D transforms.

• rotateX( angle )
• rotateY( angle )
• rotateZ( angle )
• translateZ( tz )
• scaleZ( sz )

Example 01

#tile.begin { left: 20px; top: 20px; } 
#tile.end { left: 220px; top; 220px; }

Example 05 - Walking Character

Example 06 - Rotating Cube

.stage {
    perspective: 500px;
}

.cube {
    transform-style: preserve-3d;
    animation: cubeanimation linear infinite 14s;
}

figure {
    transition: 0.5s linear;
}

.front  { transform: translateZ(  150px ) }
.back   { transform: translateZ( -150px ) }
.left   { transform: translateX( -150px ) rotateY(	 -90deg ); }
.right  { transform: translateX(  150px ) rotateY(	  90deg ); }
.top    { transform: translateY( -150px ) rotateX(	 -90deg ); }
.bottom { transform: translateY(  150px ) rotateX(	  90deg ); }

@keyframes cubeanimation {
    to { transform: rotateZ(1080deg) rotateX(360deg) rotateY(360deg); }
}

Example 07 - Carousel

.stage {
    perspective: 1100px;
}

.carousel {
    transform: translateZ( -412px );
    transform-style: preserve-3d;
    transition: transform 1s;
}

figure:nth-child(1) {
    transform: rotateY(   0deg ) translateZ( 412px );
}

Math.round( ( 300 / 2 ) / Math.tan( Math.PI / 9 ) ) = 412;