CSS in the 4th dimension

Not your daddy’s CSS animations

By Lea Verou

Picture of me
Hi, I’m Lea

I make stuff

See more: lea.verou.me/projects

CSS
WG
Invited Expert

The 4th dimension?


In the old days…

Content, options or whatever, that appears dynamically.

Abruptness = bad UX*

Transitions are not just fluff

*Delays are even worse

Don’t piss off your users

JS to the rescue (?)

<script src="jquery.min.js"></script>
<script src="jquery.animate-colors-min.js"></script>
$('button').hover(function(){
    $(this).animate('backgroundColor', 'red');
}, function() {
    $(this).animate('backgroundColor', '#800');
});
jQuery, minified
91KB
jQuery animate colors plugin, minified
2KB
Total
93KB

Yuck!

CSS transitions

Won’t somebody please think of the browsers?!

Lets get this outta the way

Transitions

4 10.5 10 1 3

Animations

5 12 10 1 4
80%
<div class="lightbox"></div>
.lightbox {
	width: 0;
	height: 0;
	background: url(img/secret.jpg), white;
	background-size: cover;
	box-shadow: 2px 2px 10px black;
}

.lightbox.current {
	width: 80%;
	height: 80%;
}
Hover over me to see the rest
First line
Second line
3rd line
4th line
5th line
6th line
7th line
8th line
9th line
10th line

WTF?!

For a value to be animatable it should be possible to represent all intermediate states

height: 0px 20px 40px 60px 80px 100px
color: white rgba(204,204,204,.8) rgba(153,153,153,.6) rgba(102,102,102,.4) rgba(51,51,51,.2) transparent
transform: rotate(0deg) rotate(5deg) rotate(10deg) rotate(15deg) rotate(20deg) rotate(25deg)
z-index: 1 2 3 4 5 6
height: auto ??? 100px
display: none ??? block
background: url(foo.jpg) ??? url(bar.jpg)

Gradients?

background-image: linear-gradient(white, black) linear-gradient(white 5%, #101010) linear-gradient(white 10%, #202020) linear-gradient(white 15%, #303030) linear-gradient(white 20%, #404040) linear-gradient(white 25%, #505050) linear-gradient(white 30%, #606060) linear-gradient(white 35%, #707070) linear-gradient(white 40%, gray)

In CSS4…

background-image: url(foo.jpg) cross-fade(foo.jpg, bar.jpg, 10%) cross-fade(foo.jpg, bar.jpg, 20%) cross-fade(foo.jpg, bar.jpg, 30%) cross-fade(foo.jpg, bar.jpg, 50%) cross-fade(foo.jpg, bar.jpg, 60%) cross-fade(foo.jpg, bar.jpg, 70%) cross-fade(foo.jpg, bar.jpg, 80%) cross-fade(foo.jpg, bar.jpg, 90%) url(bar.jpg)
Hey, the code is on the left!
← THERE

Transition limitations

CSS animations

animation-direction

normal

alternate

reverse Worse support :(

alternate-reverse Worse support :(

animation-direction: reverse

16 12.10 10 19 6

w3.org/TR/css3-animations/#animation-direction-property

docs.webplatform.org/wiki/css/properties/animation-direction

Caveats

frames.png (500×72)

:)
:)
:)
transition-* animation-*
property name
duration
delay
timing-function
iteration-count
direction
fill-mode
play-state
events (upon start, end & every iteration)
transition-* animation-*
property name
duration
delay
timing-function
iteration-count
direction
fill-mode
play-state
events (upon start, end & every iteration)
Green
Fully covered
Yellow green
Almost fully covered
Orange
Superficially covered
Dark red
Not covered

Reality check

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.something-awesome {
  animation: spin 2s ease-out;
}

.moar-coolness {
  transition: 1s transform ease-out;
}

Unprefixed Transitions

16 12.1 10 26
57%

Unprefixed Animations

16 10
24%
@-moz-keyframes spin {
  from { -moz-transform: rotate(0deg); }
  to { -moz-transform: rotate(360deg); }
}

@-o-keyframes spin {
  from { -o-transform: rotate(0deg); }
  to { -o-transform: rotate(360deg); }
}

@-webkit-keyframes spin {
  from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.something-awesome {
  -moz-animation: spin 2s ease-out;
  -o-animation: spin 2s ease-out;
  -webkit-animation: spin 2s ease-out;
  animation: spin 2s ease-out;
}

.moar-coolness {
  -moz-transition: 1s -moz-transform ease-out;
  -o-transition: 1s -o-transform ease-out;
  -webkit-transition: 1s -webkit-transform ease-out;
  transition: 1s transform ease-out;
}

OMG that’s not DRY! HELP!!!11

Alternatives:

Resources

W3C specifications

Tutorials