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

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 ...

• 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 {

}

@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;
    }
}

@keyframes gettingThePencil {
  0%{
    transform:
      translate3d(0, 0, 0)
      rotate(0deg)
      scale(0.5, 0.5);
  }

  100% {
    transform:
      translate3d(600px, 400px, 0)
      rotate(80deg)
      scale(1.2, 1.2);
  }
}

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

.pencil { 
  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 */

• 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’.

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

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

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

animation-direction: alternate;

.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;
}

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;
}

.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);
  }
}

animation-play-state: paused | running

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

• animationstart
• animationend
• animationiteration

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

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

animationend