CSS3 Transitions – An introduction – CSS Transition properties
CSS3 Transitions – An introduction – CSS Transition properties
0 0
CSS3-transitions-introduction
On Github madmed88 / CSS3-transitions-introduction
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 1s
What 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-transitionsMaterial design transitions
What's next?
CSS animations!
Any questions?
slides available here: http://madmed88.github.io/CSS3-transitions-introduction/
CSS3 Transitions
An introduction
Created by Mohamed Belhadj