CSS3 Animations

---

Preparation

• Prefixfree https://github.com/LeaVerou/prefixfree

• Modernizr https://github.com/Modernizr/Modernizr

• Google Chrome Canary

  chrome://flags/

Chrome Developer Tools

CSS3 Browser test

http://css3test.com/

CSS3 Transition

• Safari 3.2: 13/11/2008
• Firefox 4.0: Late 2010
• Chrome 1.0: 02/09/2008
• Opera 10.5: 02/03/2010
• Internet Explorer 10: 09/2011

transition: [shorthand for the below, but only one CSS property can be in this list]

transition-property: all [multiple CSS properties allowed, separated by commas]

List of all animatable properties: http://oli.jp/2010/css-animatable-properties/

transition-duration: [example values: 1s 500ms]

transition-timing-function: [default ease-in ease-out ease-in-out linear cubic-bezier]

http://blog.alexmaccaw.com/css-transitions

CSS3 Animation

• Safari 4.0: 11/06/2008
• Chrome 1.0: 02/09/2008
• Firefox 5: 20/04/2011
• IE 10: 09/2011
• Opera: 03/2012

Keyframe animation syntax: http://css-tricks.com/snippets/css/keyframe-animation-syntax/

Example properties that can be animated:

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

Easing Function Overview: http://easings.net/

• animation-timing-function: ease
• animation-timing-function: ease-in
• animation-timing-function: ease-out
• animation-timing-function: ease-in-out
• animation-timing-function: linear
• animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1)
• animation-timing-function: step-start
• animation-timing-function: step-stop
• animation-timing-function: steps(4, end)

animation: cubeanimation linear infinite 14s;

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

CSS3 2D transformation

• Safari 3.2: 13/11/2008
• Firefox 3.5: 30/06/2009
• Chrome 1.0: 02/09/2008
• Opera 10.5: 02/03/2010
• Internet Explorer 9: 09/2010

transform: rotate, translate, scale, skew

CSS3 3D transformation

• Safari 4.0: 11/06/2008
• Chrome: 28/08/2010
• IE 10: 09/2011
• Firefox: 27/10/2011

transform: rotateX, rotateY, rotateZ, translateX, translateY, translateZ

The transform-style CSS property determines if the children of the element are positioned in the 3D-space or are flattened in the plane of the element.

perspective( 500px );

To activate 3D space, an element needs perspective.

transform-style: preserve-3d;

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

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

Example 01 - Move tile

helper.js changes begin and end css class.

#slide1 {
 // transition goes here
}

#slide1.begin {
  left: 350px;
  top: 50px;
}

#slide1.end {
 left: 50px;
 top: 50px;
}

Add your first transition

transition: 500ms ease-out;
transition-property: all;

Try different transitions and build your own

transition-timing-function: cubic-bezier(0.86,0.22,0.12,0.59);
transition-duration: 500ms;
transition-property: all;

http://cssglue.com/cubic

Example 02 - Slide

transition: 500ms ease-out;
transition-property: all;

transition: 1000ms cubic-bezier(0, 0.7, 1, 0.3);
transition-property: all;

transition: 1000ms ease-out;
transition-property: all;

#slide3.end {
  opacity: 0.1;
}

Example 03 - Rotation

transition: 1000ms ease-out;
transition-property: all;

#slide1.end {
  transform: rotate(360Deg);
}

transition: 1000ms ease-out;
transition-property: all;

#slide2.end {
  transform: rotateX(360Deg);
}

transition: 1000ms ease-out;
transition-property: all;
transform-origin: 0 0;

#slide3.end {
  transform: rotate(360Deg);
}

Example 04 - Animation

transition: 1000ms ease-out;
transition-property: all;

#slide1.begin {
  animation: scaleanim 1s;
}

@keyframes scaleanim {
  from {
    left: 50px;
    top: 50px;
  }
  50% {
   left: -280px;
   top: 10px;
   transform: scale(0.5);
 }
 to {
   left: 650px;
   top: 50px;
 }
}

@keyframes scaleanim2 {
  from {
    left: 650px;
    top: 50px;
  }
  50% {
    left: 10px;
    top: 570px;
    transform: scale(0.5);
  }
  to {
    left: 50px;
    top: 50px;
 }
}

transform-origin: 0 100%;
animation: skewanim2 1s cubic-bezier(0,0.5,0.3,1);

#slide2.end {
  animation: skewanim 1s cubic-bezier(0,0.5,0.3,1);
}

@keyframes skewanim {
  from {
    left: 650px;
    top: 50px;
  }
  70% {
    left: 0px;
    top: 50px;
    transform: skew(10Deg, 0Deg);
  }
  to {
   left: 50px;
   top: 50px;
  }
}

@keyframes skewanim2 {
  from {
   left: 50px;
   top: 50px;
  }
  70% {
    left: 500px;
    top: 50px;
    transform: skew(-10Deg, 0Deg);
  }
  to {
    left: 650px;
    top: 50px;
  }
}

transition: 1000ms ease-out;
transition-property: all;
transform-style: preserve-3d;

#slide3.end {
  transform: rotateY(180Deg) rotateX(360Deg) rotateZ(180Deg);
}

Example 05 - Walking Character

.character {
    transform: translateX( 1044px );
    transition: transform 12s linear;
    animation: walk 1s steps(12) infinite;
}

@keyframes walk {
    from { background-position: 0px; }
    to { background-position: -1044px; }
}

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;