CSS Animations and Transitions
µCampfire
@passy
| Property | Global Support | DE Support | |
|---|---|---|---|
| CSS Transitions | 72% | 78% | |
| CSS Transforms | 84% | 88% | |
| CSS 3D Transforms | 71% | 75% | |
| CSS Animation | 72% | 77% | |
| CSS Filters | 43% | 24% |
Can we use it?
Can I Use + Stat Counter (July 2013)
Yup.
Transitions
transition: all 1s ease-in-out;transition: [ <transition-property> ||
<transition-duration> ||
<transition-timing-function> ||
<transition-delay> ]Property
all
single / comma-separated list
transition-property: top, left;Duration
transition-duration: [prop1], [prop2], ... transition-property: top, left;
transition-duration: 1s, 2s;Timing Function
- linear
- ease
- ease-in
- ease-out
- custom
Delay
transition-property: top, left, border-radius, background-color;
transition-duration: 2s, 1s, 0.5s, 0.5s;
transition-delay: 0s, 0.5s, 1s, 1.5s; Animations
#animated-box:hover {
animation-name: hotresize;
animation-duration: 2s;
animation-direction: alternate;
animation-timing-function: ease-in-out;
animation-iteration-count: 4;
} Keyframes
@keyframes hotresize {
0% {
padding: 0;
}
50% {
padding: 0 100px;
}
100% {
padding: 0 200px;
background: red;
}
} Properties
-
animation-name: reference to Keyframes
- animation-duration: self-explanatory
- animation-iteration-count: n || infinite
- animation-direction:
- normal
- reverse
- alternate
- alternate-reverse
- normal, reverse, normal, ...
Properties cont.
- animation-delay
- animation-fill-mode: how to retain previous styles
- none
- forwards
- backwards
- both
- animation-timing-function: same as with transitions
Events
- Animation
- animationstart
- animationend
- animationiteration
- Transition
- transitionend
careful with dem prefixes!
AnimationEvent
- target
- type
- ...
- animationName
(i.e. keyframe name) - elapsedTime
Good coders code,
great coders re-use
Thx.
Sources
Dat thing on ma head.
css-animations-and-transitions
By Pascal
css-animations-and-transitions
- 1,954
