CSS Progress Goes Boink

Practical reasons

New features often get better performance
Forward compatibility
Quicker development

Less practical reasons

Rule of cool

Why CSS gradients?

Hardware acceleration
No image size limits or weird scrolling effects

Why not CSS gradients?


background: 
  -moz-linear-gradient(top, black 0%, #777 50%, #444 51%, white 100%);

background: 
  -webkit-gradient(linear, left top, left bottom,
                   color-stop(0%,black), color-stop(50%,#777),
		   color-stop(51%,#444), color-stop(100%,white));

background: 
  -webkit-linear-gradient(top, black 0%, #777 50%, #444 51%, white 100%);

background: 
  -o-linear-gradient(top, black 0%, #777 50%, #444 51%, white 100%);

background: 
  -ms-linear-gradient(top, black 0%, #777 50%, #444 51%, white 100%);

background:
  linear-gradient(top, black 0%, #777 50%, #444 51%, white 100%);

W3C syntax


background:
  linear-gradient(top,

black 0%, #777 50%, #444 51%, white 100% )

Cheat

http://www.colorzilla.com/gradient-editor/

Transform syntax


transform: function(param, param);

Vendor prefixes


-moz-transform: rotate(33deg);
-webkit-transform: rotate(33deg);
-ms-transform: rotate(33deg);
-o-transform: rotate(33deg);
transform: rotate(33deg);

2D transform functions


rotate
scale
skew
translate
matrix

rotate


transform: rotate(33deg);

scale


transform: scale(2.0, 1.5);

skew


transform: skew(33deg);

translate


transform: translate(100px);

matrix


transform: matrix(1, -0.2,
                  0, 1,
                  0, 0);

Combination


transform: translate(100px)
           rotate(45deg);

3D transform functions


translate3d
scale3d
rotate3d
perspective

rotate3d


transform: rotate3d(0.2, 0.5,
                    0.0, 45deg);

Transition theory

Defines transition effects between states

:hover states


div {
  background: blue;
  transition-property: background;
  transition-duration: 1000ms;
  transition-timing-function: ease;
  transition-delay: 0;
}

div:hover {
  background: red;
}

:hover states


div {
  background: blue;
  transition: background 1000ms;
}

div:hover {
  background: red;
}

Class states


div {
  background: blue;
  transition: background 1000ms;
}

div.on {
  background: red;
}


$("div").click(function () {
  $(this).addClass("on");
});

Navigation example


<nav>
  <ul>
    <li>
      Item 1
      <ul>
        <li>Item 1.1</li>
        <li>Item 1.2</li>
        <li>Item 1.3</li>
        <li>Item 1.4</li>
      </ul>
    </li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
</nav>

Navigation example


nav > ul > li:hover {
  width: 250px;
  position: relative;
}

nav > ul > li > ul {
  display: none;
  position: absolute;
  top: 22px;
  right: 0;
}
nav > ul > li:hover > ul {
  display: block;
}

Navigation example


nav > ul > li {
  transition: width 500ms;
}

Navigation example


nav > ul > li > ul {
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms;
}

nav > ul > li:hover > ul {
  opacity: 1;
  pointer-events: auto;
}

Transition gotchas

Some properties aren't animatable cross-browser
Some properties behave weirdly depending on specific values

Keyframe animation

Define a set of keyframes: property values at a given point along a timeline

Multiple backgrounds

Keyframe example


#ball {
  border: solid 10px blue;
  border-radius: 10px;
  position: absolute;
  width: 0;
  height: 0;
  left: 140px;
  top: 0;
}

Multiple backgrounds

Layout

Keyframe example


@keyframes ball {
  0%   { left: 140px; top: 0; }
  25%  { left: 280px; top: 140px; }
  50%  { left: 140px; top: 280px; }
  75%  { left: 0; top: 140px; }
  100% { left: 140px; top: 0; }
}

#ball {
  animation: ball 5s linear infinite;
}

Keyframe example


@keyframes rainbow {
  0%   { background: red; }
  14%  { background: orange; }
  29%  { background: yellow; }
  43%  { background: green; }
  57%  { background: aqua; }
  71%  { background: #4b0082; }
  85%  { background: #ee82ee; }
  100% { background: red; }
}

#button:target {
  animation: rainbow 3s infinite linear;
}

CSS animations

Conceptually simple
One or more rules
Duration
Timing function

CSS animations

Animation
Designer

Backward compatibility

Modernizr

Load modernizr.js
Add a no-js class to your html element
Profit!

Modernizr: CSS

Set of classes, eg:
no-js

Modernizr: JavaScript

Modernizr object
eg Modernizr.touch is

Boris Karloff in The Bride of Frankenstein (public domain)

The reality

Can either port to JavaScript or forgo enhancements

Prototyping


nav > ul > li {
  width: 100px;
}

nav > ul > li:hover {
  width: 250px;
}

nav > ul > li {
  transition: width 500ms;
}

Prototyping


$("nav > ul > li").hover(function () {
  $(this).animate({ width: 250 }, 500);
}, function () {
  $(this).animate({ width: 100 }, 500);
});

Resources

Questions?

http://p70.us/16
(or gopher://p70.us/1/15)