Pure CSS cross browser animations for fun and profit

Front End North

Saturday November 15th

Liam Richardson

Front-end developer

Sigma Consulting Solutions ltd.

@meevil

'Sup

What you'll learn...

By the end of this presentation, you'll (hopefully) have learned how to...

• Create subtle transitions
• Create complex animations
• Animate SVG's

Let's begin our whistle stop tour!

5 essential lessons

A brief history of animation on the web

GIF's FTW

Java Applets

All hail Flash

... Oh

R.I.P in peace, Flash

The open web

Want to do animation? Pure CSS is the way forward

Lesson 1

Onto the fun stuff...

A note about code...

Transitions

.mybackground span {
    transition: opacity 2.5s ease;
}

The transition property allows you to smoothly affect an element when changing from one state to another 

.style--one

.style--two

transition: border 5s linear;

The transition property can be triggered by any kind of "state" change

:hover

JavaScript prompted class change

How did that work?

.mybackground {
    position: relative;
    display: inline-block;
    text-indent: -9999px;
    width: 250px;
    height: 365px;
    background: url(http://imagehost.vanweerd.com/images/testdm3.jpg);
    background-position: 0 0;
}

.mybackground span {
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background: url(http://imagehost.vanweerd.com/images/testdm3.jpg);
    background-position: 0 -365px;
    opacity: 0;
}

.mybackground span {
    transition: opacity 2.5s ease;
}

Animation made easy

.mybackground span {
    opacity: 0;
    transition: opacity 2.5s ease;
}

.mybackground span:hover {
    opacity: 1;
}

transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;

transition: width 1s linear 2s;

What can you use it on?

Supports 81 properties

Classed as "Animatable"

transition: width 2s, height 2s, transform 2s;

transition: all 2s linear;

Ok, so what CAN'T you use it on?

http://oli.jp/2010/css-animatable-properties/

• background-image (sort of works, sometimes)
• ​float
• height or width using the value auto (currently both values must be a length or percentage)
• display between none and anything else
• position between static and absolute

When should you use it?

On the majority of projects?

• As little as possible
• As subtly as possible

Buttons and links

Image transitions

Smooth UI

Sass <3

@mixin transition($transition-property, $transition-time, $method) {
    transition: $transition-property $transition-time $method;
}

Transitions allow you to create smooth, subtle animations with ease

Lesson 2

What about "REAL" animation?

Keyframes

@keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
}

How do keyframes work?

Keyframes are essentially a  list of what the animation should do over a defined period of time

Let's see them in action

How did that work?

.car {
  animation-name: drive;
  animation-duration: 2s;
}

@keyframes drive {
  from {margin-left: 0px;}
  to {margin-left: 400px;}
}

CSS @keyframes

@keyframes drive {
  from {margin-left: 0px;}
  to {margin-left: 400px;}
}

@keyframes %

@keyframes drive {
  0% {margin-left: 0px;}
  50%{margin-left: 200px;}
  100% {margin-left: 400px;}
}

Standard CSS

.car {
  animation-name: drive;
  animation-duration: 2s;
}

What can you change using @keyframes?

The same 81 properties that you can influence with transition can be changed with @keyframes as well

Properties, properties, properties

• animation-delay
• animation-direction
• animation-duration
• animation-fill-mode
• animation-iteration-count
• animation-name
• animation-play-state
• animation-timing-function

animation-timing-function

linear

ease-in

ease-out

So many options

• linear
• ease
• ease-in
• ease-out
• ease-in-out
• cubic-bezier(n,n,n,n)

When should you use it?

On projects that require additional visual "flair" or engagement that traditional methods can't provide.

• As little as possible
• As subtly as possible
• Ensure the design doesn't rely on it

Adding fluidity to an otherwise static design

Creating visual flair

Enhancing dull UI's

Doing something crazy

http://codepen.io/Xpressive_Team/full/LeHGF/

Keyframes allow you to create amazing animations that work

seamlessly across

modern browsers

Lesson 3

SVG + CSS animation = Awesomeness

My god, it's full of code...

Code you can apply classes too!

  <rect class="background" fill="#D03E27" width="400" height="400" />

  <path class="letter" fill="#F4F4F4" d="M60.858,129...." />
  <path class="letter" fill="#F4F4F4" d="..." />

Allowing you to do cool stuff!

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear alternate infinite;
}

@keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

A larger playset - SVG

only properties

clip-rule, flood-color, flood-opacity, stop-opacity, kerning, tech-anchor, color-profile, color-rendering, fill, fill-opacity, fill-rule, marker, marker-end, marker-mid, marker-start, stroke, stroke-width, stop-color, lighting-color, enable-background, dominant-baseline, color-interpolation-filters, color-interpolation, glyph-orientation-horizontal, glyph-orientation-vertical, shape-rendering, baseline-shift, alignment-baseline, stroke-miterlimit, stroke-linejoin, stroke-linecap, stroke-dashoffset, stroke-dasharray, stroke-opacity

SVG's are potentially the future of web graphics, and give CSS animation

super powers

Lesson 4

Get experimenting with transforms!

Get creating with @keyframes!

Webkit, you silly thing

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

/* Standard syntax */
@keyframes myfirst {
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

Stop waiting around, get creating!

Lesson 5

Additional reading

• http://valhead.com/book/
• http://slides.com/sarasoueidan/styling-animating-svgs-with-css#/
• http://www.smashingmagazine.com/2014/11/03/styling-and-animating-svgs-with-css/
• http://www.smashingmagazine.com/2014/04/15/understanding-css-timing-functions/