css-notes/7. Motion, Transform, and Design/2. MOTION.md

CSS - Motion

Lesson Objectives

1. Explain the roles in traditional animation and how they apply to computer animation
2. Create basic transitions between a start and end state in CSS
3. Write complex animations with multiple states

Explain the roles in traditional animation and how they apply to computer animation

1. In traditional (hand-drawn) animation, there were two kinds of animators
   • Keyframe artist
     • Draws the main frames for the animation
   • Inbetweener (tweener)
     • Fills in the frames between each keyframe so it looks fluid
2. In computer animation, we act as the keyframe artist, and the computer is the tweener.

Create basic transitions between a start and end state in CSS

Define a start state and an end state

a {
	background:yellow; /* start state */
}
a:hover {
	background:green; /* end state */
}

Three main properties:

• transition-property: background, left, top, height;
• transition-duration: 0.5s;
• transition-timing-function: ease;
  • ease
  • linear
  • ease-in
  • ease-out
  • ease-in-out
  • cubic-bezier(n,n,n,n)
• transition-delay: 1s;

Shorthand

• transition: <property> <duration> <timing-function> <delay>

Write complex animations with multiple states

Transitions are great for going from one state to another, but sometimes you need more than a start and end state. To do this, there are two steps

1. Create a named animation with a set of keyframes.

   @keyframes example {
       0%   {background-color:red; left:0px; top:0px;}
       25%  {background-color:yellow; left:200px; top:0px;}
       50%  {background-color:blue; left:200px; top:200px;}
       75%  {background-color:green; left:0px; top:200px;}
       100% {background-color:red; left:0px; top:0px;}
   }
   

2. Assign the animation to a rule and give it a duration

   div {
       width: 100px;
       height: 100px;
       background-color: red;
       position: relative;
       animation-name: example;
       animation-duration: 4s;
   }
   

3. Additional properties

   • animation-timing-function
   • animation-iteration-count (can be set to infinite)
   • animation-direction
     • reverse
     • alternate
   • animation-delay
   • animation-play-state
     • paused
     • running