CSS3 Animations

Safari still needs -webkit- prefixes.

Usefull properties

Set animation direction alternate if you want to start when it ended.

animation-play-state can pause or play the animation (paused, running)

animation-fill-mode useful when you want the animation to stay in the last keyframe after played.

3d Transforms

3d transforms are now available in all the modern browsers.

rotateZ

transform-origin is set in the middle by default.

back-face-visibility to show the back face when rotating.

Children

  1. .parent {
  2.   transform-style: preserve-3d; /* default. The children will inherit 3d styles */
  3.   transform-style: flat; /* option2: The children will appear flat on the parent surface */
  4. }

Perspective

perspective indicates how 3d-ish will things appear. The lower the number, the more 3d-like.
It indicates the distance from the viewer to the object.

  1. .example {
  2.   perspective: 500px; /* mid-range from */
  3.   perspective: 1500px; /* very far away */
  4.   perspective: 150px; /* very close */
  5. }

perspective-origin establishes a vanishing point. 

  1. .example {
  2.   perspective-origin: 50% 50%; /* center (default) */
  3.   perspective-origin: 25% 25%; /* mid-upper left */
  4.   perspective-origin: 50% 100%; /* center-bottom  */
  5. }

Sprite animations

Use steps() to animate using a sprite

  1. .sprite {
  2.   background: transparent url(walker.png) 0 0 no-repeat;
  3.   animation: walker 2s steps(10);
  4. }
  5. keyframes walker {
  6.   0% { background-position: 0 0; }
  7.   100% { background-position: 0 -4000px; }
  8. }

Chaining animations

Separate them with commas.

  1. .mol {
  2.   animation-name: roll-in, scale-up;
  3.   animation-duration: 1s, .75s;
  4.   animation-delay: 0s, 1s; // Here you chain the sequence
  5.   animation-iteration-count: 1, 1;
  6.   animation-fill-mode: forwards, forwards;
  7. }
  8. keyframes roll-in { 
  9.   // ...
  10. }
  11. keyframes scale-up {
  12.   // ...
  13. }

Transitions

To animate the transition between CSS styles. Normally its used with hover but could be also used with programatically injected styles|classes.

transition-property
transition-duration

transition-timing-function
use cubic-beziier(x1,y1,x2,y2) for realistic movements

Animations using base64

Turn an animated GIF into base64 using a website like https://www.base64-image.de/

Use it as a CSS background-image.