CSS in the 4th dimension
Not your daddy’s CSS animations
By Lea Verou
@LeaVerou #fosscomm
By Lea Verou
@LeaVerou #fosscomm
I work @ 
<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');
});<div class="lightbox"></div>.lightbox {
width: 0;
height: 0;
background: url(img/secret.jpg), white;
background-size: cover;
}
.lightbox.current {
width: 80%;
height: 80%;
}
normal
alternate
reverse Worse support :(
alternate-reverse Worse support :(
w3.org/TR/css3-animations/#animation-direction-property
docs.webplatform.org/wiki/css/properties/animation-direction
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) | |
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.something-awesome {
animation: spin 2s ease-out;
}
.moar-coolness {
transition: 1s transform ease-out;
}
28% of users*
@-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;
}