Animation Deep Dive

http://estelle.github.io/animation/
#AnimDive

#DiveAnim

Needs more cowbell

Simplest Transition

a {
  color: green;
}
a:hover {
  color: orange;
}

Hover Over Me

CSS3 Transition

a {
  color: green;
  transition: 1s;
}
a:hover {
  color: orange;
}

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/16
  • Opera 10.5
  • IE 10

transitions

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

transitions

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

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

Transitionable Properties

  • background-color
  • background-position
  • border-color
  • border-width
  • border-spacing
  • bottom
  • clip
  • color
  • crop
  • font-size
  • font-weight
  • height
  • left
  • letter-spacing
  • line-height
  • margin
  • max-height
  • max-width
  • min-height
  • min-width
  • opacity
  • outline-color
  • outline-offset
  • outline-width
  • padding
  • right
  • text-indent
  • text-shadow
  • top
  • vertical-align
  • visibility
  • width
  • word-spacing
  • z-index

Transition placement

Try it out!

Transition Features (or Limitations)

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

transitionend event

  • Event thrown only when transition completes
  • transitionend for EVERY property
  • transitionend for each long-hand property within a shorthand
table {
  border: 1px black solid;
  transition: border 1s linear 50ms;
}
table:hover {
  border: 5px red solid;
}
  • border-top-color
  • border-right-color
  • border-bottom-color
  • border-left-color
  • border-top-width
  • border-right-width
  • border-bottom-width
  • border-left-width

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

  • Chrome
  • Safari
  • Firefox
  • Opera
  • IE
10

  Prefix -webkit- for < iOS9 / Safari 9 and Android <= 4.4.4.

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

@-webkit-keyframes ....

Name your keyframe animation

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

What's in a name?

Try it out!

at-rule

@keyframes slides {

}

@-webkit-keyframes slides {

}

Keyframes

@keyframes writing {

    from {
      left: 0;
    }

    to {
      left: 100%;
    }
}

Keyframes

@keyframes writing {
    0% {
      left: 0;
    }

    100% {
      left: 100%;
    }
}

Don't forget the %

Don't quote the animation name

0% and 100%

Try it out!

Granular animation control

@keyframes writingWhileTired {
    0% {
      left: 0;
    }

    10% {
      left: 45%;
    }

    90% {
      left: 55%;
    }

    100% {
      left: 100%;
    }
}

!important it isn't

Try it out!

Animating multiple properties

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

Duplicated Keyframes?

Try it out!

But nothing is
animated yet!

Base CSS

   .pencil {
     width:100px;
     text-align: right;
     border-bottom: 10px solid;
   }
   .pencil::after {
	content: '✎';
	position: absolute;
	bottom: -20px;
	right: -10px;
   }
@keyframes drawALine {
  0%{
    width:0;
    color:green;
  }
  100% {
    width: 100%;
    color:blue;
  }
}

animation name and duration

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

Order of Precedence

Try it out!

Specificity

Try it out!

!important it isn't

Try it out!

‘animation-timing-function’

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

Cubic Bezier

Try it out!

Cubic Bezier

Try it out!

Steps()

Try it out!

Steps()

Try it out!

steps(4, end)

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

Steps(4, end)

Try it out!

‘animation-iteration-count’

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

Partial Iteration?

Try it out!

No Iteration?

Try it out!

‘animation-delay’

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

‘animation-direction’

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

‘animation’ (shorthand)

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

‘animation-fill-mode’

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

Animation Fill Mode (again)

animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;
.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

Can you stop an animation?

‘animation-play-state’

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’

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

What happens at animation end?

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

Starting next animation at end of previous

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

Events: start, lots 'o iterations, end

Try it out!

Thanks

Estelle Weyl

www.standardista.com

@estellevw

@standardista

HTML5 and CSS3 for the Real WorldHTML5: The Definitive GuideMObile HTML5Web Performance Daybook

#DiveAnim 5 Sooooo much cowbell

#DiveAnim

5

Just enough cowbell