- animatable CSS properties
- Longhand Properties vs. Shorthand Properties
- Multiple Transitions
- TransitionEnd Event
Shorthand Properties
transition: width 1s ease-out;
Longhand Properties
transition-property: width;
transition-duration: 1s;
transition-timing-function: ease-out;
Multiple Transitions
transition: width .5s ease-in, border-radius 1s linear;
//or
transition-property: width, border-radius;
transition-duration: .5s, 1s;
transition-timing-function: ease-in, linear;
TransitionEnd Event
document.querySelector("#id").addEventListener("transitionend", () = >, false);