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 I Use + Stat Counter (July 2013)
transition: all 1s ease-in-out;
transition: [ <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay> ]
transition-property: top, left;
transition-duration: [prop1], [prop2], ...
transition-property: top, left;
transition-duration: 1s, 2s;
transition-property: top, left, border-radius, background-color;
transition-duration: 2s, 1s, 0.5s, 0.5s;
transition-delay: 0s, 0.5s, 1s, 1.5s;
#animated-box:hover {
animation-name: hotresize;
animation-duration: 2s;
animation-direction: alternate;
animation-timing-function: ease-in-out;
animation-iteration-count: 4;
}
@keyframes hotresize {
0% {
padding: 0;
}
50% {
padding: 0 100px;
}
100% {
padding: 0 200px;
background: red;
}
}
careful with dem prefixes!