Transforms, Transitions & Animations

estelle.github.io/animation/30.html

2D Transform Functions

translate(<length>[, <length>])
specifies a 2D translation by the vector [x, y], where x is the translation-value parameter for the x axis and y is the optional translation value along the y axis. parameter. If y is not provided, y==0.
translateX(<length>)
specifies a translation by the given amount in the X direction.
translateY(<length>)
specifies a translation by the given amount in the Y direction.
scale(<number>[, <number>])
specifies 2D scaling operation by the [sx,sy]. If sy is not provided, sy will equal sx (growsing or shrinking with the same scale). Scale(1, 1) or scale(1) leaves an element in it's default state. Scale(2, 2) or scale(2) causes the element to appear twice as wide and twice as tall as its default size, taking up 4-times the original area.
scaleX(<number>)
specifies a scale operation using the [sx, 1] scaling vector, where sx is given as the parameter.
scaleY(<number>)
specifies a scale operation using the [1, sy] scaling vector, where sy is given as the parameter.
rotate(<angle>)
specifies a 2D rotation by the angle specified in the parameter about the origin of the element, as defined by the transform-origin property. For example, rotate(90deg) would cause elements to appear rotated one-quarter of a turn in the clockwise direction.
skewX(<angle>)
specifies a skew transformation along the X axis by the given angle.
skewY(<angle>)
specifies a skew transformation along the Y axis by the given angle.
matrix(<num>, <num>, <num>, <num>, <num>, <num>)
Generally machine generated, specifies a 2D transformation in the form of a transformation matrix of six values. matrix(a,b,c,d,e,f) is equivalent to applying the transformation matrix [a b c d e f].

transform-origin property

Specifies the x and y position of the origin, relative to the transform object.

  • Keyword positions: left, right, bottom, top, center
  • Length values
  • Percentage values
  • default is 50% 50% (or center center)
  • Supported in all browsers that support transform. Prefixed if transform is prefixed

Transforms

Play

Simplest Transition

a {
  color: red;
}
a:hover {
  color: yellow;
}

Hover Over Me

CSS3 Transition

a {
  color: red;
  transition: 1s;
}
a:hover {
  color: yellow;
}

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
  •   With vendor prefix. No prefix FF16 & IE10. Not OperaMini or Win✆

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

Transitioning Transforms

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

Transition Features (or Limitations)

  • Single Iteration
  • 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);
}

Grok it

Play

Pick a card

.card {
  position: absolute;
  perspective: 600px;
}
.card:hover {
  transition: 1s ease;
}
.card .front {
  transform: rotateX(0deg) rotateY(0deg);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: all .4s ease-in-out;
}
.card:hover .front {
  transform: rotateY(180deg);
}
.card .back {
  transform: rotateY(-180deg);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: all .4s ease-in-out;
}
.card:hover .back {
  transform: rotateY(0);
}
.card:first-of-type {
  transform: rotate(-5deg);
}
.card:nth-of-type(2):hover {
  transform: rotate(0) translatex(120px);
}
.card:last-of-type {
  transform: rotate(5deg);
}
.card:first-of-type:hover {
  transform: rotate(10deg) translatey(180px);
}

Animations

  • Chrome
  • Safari
  • Firefox 5/16
  • Opera 12
  • IE 10
  •   With vendor prefix. No prefix FF16 & IE10. Not OperaMini or Win✆

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)

Animating multiple properties

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

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

-webkit- | -moz- | -o-

‘animation-iteration-count’

.pencil {
  ...
  animation-name: drawALine;
  animation-duration: 3s;
  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- | -o-

‘animation-delay’

.pencil { 
  animation-name: drawALine;
  animation-duration: 8s;
  animation-iteration-count: 2;
  animation-delay: 2s;
}

-webkit- | -moz- | -o-

‘animation-direction’

.pencil {
  ...
  animation-name: drawALine;
  animation-duration: 5s;
  animation-iteration-count: 5;
  animation-direction: normal
}

Two possible values: normal | alternate;

animation-direction: alternate;

-webkit- | -moz- | -o-

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

-webkit- | -moz- | -o-

Gangnam Style: Sprite Animation

Try it out

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

-webkit- | -moz- | -o-

Pick a card

.carda.flipped .front,
.carda.unflipped .back {
  animation: flipme 1s linear forwards;
}
.carda.unflipped .front,
.carda.flipped .back {
  animation: unflipme 1s linear both;
}
.card.flipped:nth-of-type(2){
  transform:
    rotate(0)
    translatex(120px);
}
.carda.flipped:first-of-type{
  transform:
    rotate(-5deg)
    translate(240px, 25px);
}
@keyframes flipme {
  0% {transform: rotatey(0deg)}
  100% {transform: rotateY(-180deg);}
}
@keyframes unflipme {
  0% {transform: rotatey(180deg)}
  100% {transform: rotateY(0deg);}
}

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

. . . or . . . -webkit- | -moz- | -o-

.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

That's all we're covering here

We have a lot to cover. If you want to dig deeper, you can continue on with this deck. For an even deeper dive, checkout how CSS3 Transforms and a longer CSS3 Transitions & Animations deck.

Continue: Recap of all (almost) we've learned

Continue: Mobile CSS3: Main Deck

Continue: Mobile CSS3: Performance Considerations

Dive deeper: Transforms | Transitions & Animations or right arrow.

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

-webkit- | -moz- | -o-

‘animation-play-state’

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

What happens at animation end?

  • animationstart
  • animationend
  • animationiteration
el.addEventListener( 'webkitAnimationEnd',
    function( event ) {
        console.log('Animation Ended');
    }, false );
  • webkitAnimationStart | mozAnimationStart | oAnimationStart
  • webkitAnimationEnd | mozAnimationEnd | oAnimationEnd
  • webkitAnimationIteration | mozAnimationIteration | oAnimationIteration

Starting next animation at end of previous

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