Enables the transition of properties from one state to the next over a defined length of time

• transition-property: properties (or 'all') that transition
• transition-duration: s or ms it takes to transition
• transition-timing-function: bezier curve of transition
• transition-delay: s or ms before transition starts
• transition: shorthand for 4 transition properties

• Chrome
• Safari
• Firefox 4/16
• Opera 10.5
• IE 10
•   With vendor prefix. No prefix FF16 & IE10. Not OperaMini or Win✆

code {
   color: black;
   font-size: 85%;
   background-color: rgba(255,255,255,0.9);
   transition: all 2s ease-in 50ms;
}
code:hover {
   color: red;
   font-size: 120%;
   background-color: rgba(255,255,255,0.8);
}

code {
   transition:
      color, font-size, background-color 2s ease-in 50ms;
}

code {
   color: black;
   font-size: 85%;
   background-color: rgba(255,255,255,0.9);
   transition: all 2s ease-in 50ms;
}
code:hover {
   color: red;
   transform: scale(1.4);
   transform-origin: 0 0;
   background-color: rgba(255,255,255,0.8);
}

code {
   transition:
      transform 2s ease-in 50ms;
}

@keyframes clever_name_here ...

@-webkit-keyframes clever_name_here ...

• Identifier
• Unquoted
• Characters [a-zA-Z0-9], -, _ and ISO 10646 characters U+00A0 and higher
• ISO 10646 = Universal Character Set = Unicode standard
• [-_a-zA-Z0-9\u00A0-\u10FFFF]
• Can't start [0-9], -- , or hyphen+digit
• Can contain escaped:
  Q&A! may be written as Q\&A\! or Q\26 A\21

Don't use keyterms!

@keyframes slides {

}

@-webkit-keyframes slides {

}

@keyframes writing {

    from {
      left: 0;
    }

    to {
      left: 100%;
    }
}

@keyframes writing {

    0% {
      left: 0;
    }

    100% {
      left: 100%;
    }

}

Don't forget the %

Don't quote the animation name

@keyframes writingWhileTired {

    0% {
      left: 0;
    }

    10% {
      left: 45%;
    }

    90% {
      left: 55%;
    }

    100% {
      left: 100%;
    }

}

@keyframes W {
    0% {
      left: 0;
      top: 0;
    }
    25%, 75% {
      top: 400px;
    }
    50% {
      top: 50px;
    }
    100% {
      left: 80%;
      top: 0;
    }
}

.pencil { 
   animation-name: drawALine;
animation-duration: 3s;
  }

-webkit- | reset

.pencil { lineareaseease-inease-outease-in-outstep-startstep-endsteps(5, start)steps(5, end)
  animation-name: drawALine;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
}

ease           linear
ease-in        ease-out
ease-in-out    cubic-bezier(x1, y1, x2, y2)
step-start /* same as steps(1, start) */
step-end /* same as steps(1, end) */
steps( X, start|end) /* X = # of steps + when change of value occurs */

-webkit- | reset

• 0%
• 25%
• 50%
• 75%
• 100%

.pencil {
  ...
  animation-name: drawALine;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 3;
}

‘infinite’ or number. Default is ‘1’.

-webkit-animation-iteration-count: 3;

-webkit- | -moz- | -o-

.pencil { 
  animation-name: drawALine;
  animation-duration: 8s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 2;
  animation-delay: 2s;
}

-webkit- | reset

.pencil {
  ...
  animation-name: drawALine;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 5;
  animation-direction: normal
}

4 possible values: normal | alternate | reverse | alternate-reverse;

animation-direction: alternate;

-webkit- | reset

.pencil {
  animation-name: drawALine;
  animation-duration: 5s;
  animation-delay: 100ms;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 5;
  animation-direction: normal;
}

. . . can also be written as . . .

.pencil {
  animation: drawALine 5s ease-in-out 100ms 5;
}

-webkit- | reset

values: none | forwards | backwards | both

.pencil {
  animation-name: gettingThePencil;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
  animation-delay: 2s;
 animation-fill-mode: none;
}

. . . or . . . -webkit- | reset

.pencil {
animation: gettingThePencil 3s ease-in-out 1s   forwards;
}

.box { animation: showme 5s linear 5s 1;}
@keyframes showme {
	0% {left: 200px; background-color:blue;}
	50% {background-color:green;}
	100% {left: 600px; background-color: yellow;}
}

Test page

animation-play-state: paused | running

.pencil {
	transform-origin: center 300px;
	animation: writingInCircles 3s linear infinite;
 }
.pencil:hover {
	animation-play-state:paused;
 }

@keyframes writingInCircles {
  100% {
    transform:
      rotate(360deg);
  }
}

-webkit- | reset

animation-play-state: paused | running

.pencil:hover {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
  }

• animationstart
• animationend
• animationiteration

el.addEventListener( 'webkitAnimationEnd',
    function( event ) {
        console.log('Animation Ended');
    }, false );

• webkitAnimationStart | animationstart
• webkitAnimationEnd | animationend
• webkitAnimationIteration | animationiteration

el.addEventListener( 'webkitAnimationEnd',
    function( event ) {
        el.removeClassName('newClass');
        setTimeout("el.addClassName('newClass')", 100ms)
    },
    false );

webkitAnimationEnd
animationend

• Cubic Bezier
• cubic bezier
• Steps
• Gangham Style
• Iteration Count
• Animation Fill Mode
• Animation Events