Animations

Transition

  Caniuse

How?

.elem {
    transition: opacity 3s 1s;
}
.elem {
    transition-property: opacity;
    transition-duration: 3s;
    transition-delay: 1s;
}

.elem {
    transition: transform .3s, opacity 3s 1s;
}
.elem {
    transition-property: transform, opacity;
    transition-duration: .3s, 3s;
    transition-delay: initial, 1s;
}
						

Timing Functions

Cubic bezier curve

  Cubic bezier
  Cubic bezier by Lea Verou
  CSS Timing functions

Timing Functions

  Presets

Timing Functions

Steps

Timing Functions

Steps

Delay

Negative delay starts the animation at position corresponding absolute value of delay

Animation

How?

.elem {
    animation: some-madness 3s infinite;
}
.elem {
    animation-name: some-madness;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

.elem {
    animation: move .3s, hide 2s 1s;
}
.elem {
    animation-name: move, hide;
    animation-duration: .3s, 2s;
    animation-delay: initial, 1s;
}
						

@keyframes

@keyframes <name> rule defines scenario of animation

@keyframes some-madness {
    from {
        left: 0px;
        top: 200px;
    }
    40%, 60% {
        left: 400px;
        background: brown;
    }
    to {
        left: 200px;
        top: 0px;
    }
}

.elem {
    animation: some-madness 3s infinite;
}
						

Timing functions

For keyframed animations, the timing function applies between keyframes rather than over the entire animation

tbody:hover .elem {
  animation: move 2s ease 1; }

@keyframes move {
  0% {
    transform: translateX(-100%); }
  25% {
    transform: translateX(-75%); }
  50% {
    transform: translateX(-50%); }
  75% {
    transform: translateX(-25%); }
  100% {
    transform: translateX(0%); } }
						

Iteration count

Number of iterations. Infinite or float (for example 0.5 will play half of the animation cycle)

Fill mode

Specifies how a CSS animation should apply styles to its target before and after it is executing.

body:hover tr .elem {
	-webkit-animation: move 2s linear 1s;
			animation: move 2s linear 1s;
}
						

Fill mode example

Direction

tbody:hover tr .elem {
	-webkit-animation: move 2s 2 ease-in
			animation: move 2s 2 ease-in
}
						

Play state

Debugging tools

  Paul Lewis - The Applied Science of Runtime Performance

Performance

• Use translate() instead top/left positioning
• Use translateZ(0) or translate3d(0, 0, 0) to force hardware acceleration

  will-change property
  Accelerated Rendering in Chrome
  On translate3d and layer creation hacks
  High Performance Animations
  Translate performanse

Example

Oops...

Explanation of strange behavior and some tricks

Transform and containing block

Opacity stacking context

!important vs animation

Moving an element along a circle

Gradient animation

Vendor prefix and camelCase may require. For example webkitAnimationEnd

Example

Request animation frame

Runs callback function with before the next repaint.

var request;
function step(timestamp) {
    document.body.innerHTML = timestamp;
    request = requestAnimationFrame(step);
}
request = requestAnimationFrame(step);

setTimeout(function(){
    cancelAnimationFrame(request);
}, 1000);
						

  requestAnimationFrame for Smart Animating

Why?