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
• Opera 10.5
• IE 10
•   all with vendor prefix. Not OperaMini or Win✆

code {
   color: #000000;
   font-size: 100%;
   background-color: rgba(255,255,255,0.4);
   transition: all 0.5s ease-in 50ms;
}
code:hover {
   color: #C7573A;
   font-size: 120%;
   background-color: rgba(255,255,255,0.8);
}

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

@keyframes flying {

    from {
      left: 0;
    }

    to {
      left: 100%;
    }
}

@keyframes flying {

    0% {
      left: 0;
    }

    100% {
      left: 100%;
    }

}

Don't forget the %

Don't quote the animation name

@keyframes flyingDangerously {

    0% {
      left: 0;
    }
    
    10% {
      left: 45%;
    }
    
    90% {
      left: 55%;
    }

    100% {
      left: 100%;
    }

}

@keyframes UFO {

   0% {
      left: 0;
      opacity: 1;
    }
    
    50% {
      opacity: 0.1;
    }

    100% {
      left: 100%;
      opacity: 1
    }

}
	

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

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

}

-webkit- | -moz- | -ms-

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

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

}

.plane {
    -webkit-transform-origin: left 300px; 
    -moz-transform-origin: left 300px;
    -ms-transform-origin: left 300px;
    }

-webkit- | -moz- | -ms-

.plane { 
  ...
  transform-origin: left 300px;
  ...
  animation-name: flyingTowardsUser; 
  animation-duration: 3s;
  
  

-webkit- | -moz- | -ms-

.plane { easeease-inease-outease-in-outstep-startstep-endsteps(8, start)
  ...
  animation-name: flyingTowardsUser; 
  animation-duration: 8s;
  animation-timing-function: ease-in-out;
}

ease
linear
ease-in 
ease-out 
ease-in-out  
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 */
cubic-bezier(x1, y1, x2, y2)

-webkit- | -moz- | -ms-

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

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

-webkit-animation-iteration-count: 3;
-moz-animation-iteration-count: 3;
-ms-animation-iteration-count: 3;

-webkit- | -moz- | -ms-

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

-webkit- | -moz- | -ms-

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

Two possible values: normal | alternate;

animation-direction: alternate;

-webkit- | -moz- | -ms-

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

. . . can also be written as . . .

.plane {
  ...
  animation: flyingTowardsUser 5s ease-in-out 100ms 5;
}

-webkit- | -moz- | -ms-

values: none | forwards | backwards | both

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

. . . or . . .-webkit- | -moz- | -ms-

.plane {
animation: flyingTowardsUser 3s ease-in-out 1s   forwards;
}

animation-play-state: paused | running

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

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

-webkit- | -moz- | -ms-