Transitions & Animations

Simplest Transition

a {
  color: #C7573A;
}     
a:hover {
  color: #BDD9D5;
}

Hover Over Me

CSS3 Transition

a {
  color: #C7573A; 
  transition: 1s;
}
a:hover {
  color: #BDD9D5;
}

Hover Over Me

transitions

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

transitions

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

What can be transitioned?

Anything that has intermediate values

code {
  opacity: 1;
}
code:halfway {
  opacity: 0.5;
}
code:hover {
  opacity: 0;
}
code {
  display: block;
}
code:halfway {
  display: ???
}
code:hover {
  display: none;
}

What can be transitioned?

2 values that have REAL intermediary values

code {
  font-size: 100%;
}
code:halfway {
  font-size: 110%;
}
code:hover {
  font-size: 120%;
}
code {
  height: auto;
}
code:halfway {
  height: ???
}
code:hover {
  height: 1000px;
}

Transitioning Transforms

✈ 
.plane {
    transition: all 1s ease-in 50ms;
    transform-origin: 100px 150px;
}
.plane:hover {
    transform: rotate(360deg) scale(2);
}

Tranform Features (or Limitations)

  • Single Iteration
  • Reverse is controllable
  • Reverse goes to initial state
  • No granular control
  • Limited methods of initiation
  • Can't force them to finish

Putting it together in the Real World

nav ul li {
  list-style-type: none;
}
nav > ul > li {
  display: inline-block; 
  position:relative;
}
nav ul ul {
  transform: scale(1,0); 
  transform-origin: top center; 
  transition:0.2s linear 50ms; 
  position:absolute; 
  top: 100%;
}
nav li:hover ul {
  transform: scale(1,1);
}

Animations

Animation Features (or limitations)

  • Single, many or infinite iterations
  • Single or bi-directional
  • Granular control
  • Can be initiated on page load
  • Has more robust JS Hooks
  • Can be paused
  • Lowest priority in UI Thread

Animation Essentials

  • @keyframes
  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-iteration-count
  • animation-direction
  • animation-play-state
  • animation-delay
  • animation-fill-mode
  • animation (shorthand)

@Keyframes

Keyframes

✈ 
@keyframes flying {

    from {
      left: 0;
    }

    to {
      left: 100%;
    }
}

Keyframes

✈ 
@keyframes flying {

    0% {
      left: 0;
    }

    100% {
      left: 100%;
    }

}

Don't forget the %

Don't quote the animation name

Granular animation control

✈ 
@keyframes flyingDangerously {

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

    100% {
      left: 100%;
    }

}

Animating multiple properties

✈ 
@keyframes UFO {

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

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

}

Animating CSS Transforms

✈ 
@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-

with ‘transform-origin’

✈ 
@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-

But nothing is animated yet!

Base CSS

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

animation name and duration

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

-webkit- | -moz- | -ms-

✈

‘animation-timing-function’

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

‘animation-iteration-count’

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

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

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

-webkit- | -moz- | -ms-

✈

‘animation-delay’

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

-webkit- | -moz- | -ms-

‘animation-direction’

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

‘animation’ (shorthand)

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

‘animation-fill-mode’

✈ 
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’

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

HTML5: <canvas>

Next ➹