This document introduces CSS3 transitions, transformations, animations and filters. It provides examples of transition properties, timing functions, transformation functions like translate, scale, rotate and matrix, how to define CSS animations with keyframes, and a list of supported filter functions. Browser support for these features includes Firefox 5+, IE 10+, Chrome, Safari 4+ and Opera 12+. References for further reading on these topics are also provided.

1. Introduction to CSS3 Animations
and Transitions
Philly.Net CC 2014.1
Sunday June 21, 2014
Mike Melusky
@mrjavascript

2. Transitions
.example {
transition: [transition-property] [transition-
duration] [transition-timing-function]
[transition-delay];
}

3. Transitions

4. Timing Functions
● Ease
● Linear
● Ease-in
● Ease-out
● Ease-in-out
● cubic-bezier(n,n,n,n)

5. Transformation
div {
transform: transform-function || none; /*
can list multiple, space-separated */
}
●

6. Transformation● transform: none
● transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0)
● transform: translate(12px, 50%)
● transform: translateX(2em)
● transform: translateY(3in)
● transform: scale(2, 0.5)
● transform: scaleX(2)
● transform: scaleY(0.5)
● transform: rotate(0.5turn)
● transform: skewX(30deg)
● transform: skewY(1.07rad)
● transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0)
● transform: translate3d(12px, 50%, 3em)
● transform: translateZ(2px)
● transform: scale3d(2.5, 1.2, 0.3)
● transform: scaleZ(0.3)
● transform: rotate3d(1, 2.0, 3.0, 10deg)
● transform: rotateX(10deg)
● transform: rotateY(10deg)
● transform: rotateZ(10deg)
● transform: perspective(17px)
● transform: translateX(10px) rotate(10deg) translateY(5px)

7. Transformation

8. Animations
@keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}
#box {
-webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */
-moz-animation: NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */
-o-animation: NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */
animation: NAME-YOUR-ANIMATION 5s infinite; /* IE 10+ */
}
●
●
Browser Support
●
Firefox 5+, IE 10+, Chrome, Safari 4+, Opera 12+

9. Filters
.filter-me {
filter: <filter-function> [<filter-function>]* |
none
}

10. Filter Functions
●
blur()
● brightness()
●
contrast()
●
url()
●
drop-shadow()
● grayscale()
●
hue-rotate()
●
invert()
●
opacity()
● sepia()
●
custom() - "coming soon"

11. Filters

12. References
● http://css-tricks.com/
● http://www.w3schools.com/
● http://alistapart.com/