- 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: []* | 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/
