CSS3 Transitions
An introduction
Created by Mohamed Belhadj
W3C definition
CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration.
Pros
Simple. Efficient. Cool.
CSS Transition properties
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
- transition
property name | duration | timing function | delay
transition: margin-left 4s ease-in-out 1sWhat is animatable
- background-color
- width/height
- top/left/bottom/right
- margin/padding
- border width and color
- opacity
Full list can be found here
Browser support
http://caniuse.com/#feat=css-transitions
Material design transitions
What's next?
CSS animations!
Any questions?
slides available here: http://madmed88.github.io/CSS3-transitions-introduction/