Configurable Properties
Explore how to configure CSS transition properties like duration, delay, timing function, and transition-property to create smooth, controlled animations in Angular. Understand applying transitions to single or multiple properties, adding delays, and combining CSS with JavaScript/TypeScript for dynamic effects.
We'll cover the following...
CSS transitions have four configurable properties to customize the animation:
-
transition-duration: This specifies the duration of the transition in either seconds or milliseconds. -
transition-delay: This specifies the wait time before the transition is executed in either seconds or milliseconds. -
transition-timing-function: This specifies a function to determine how the intermediate transitions are calculated. Think of this as the ability to control the acceleration and deceleration of our animations as they’re being executed. -
transition-property: This specifies the CSS properties the transitions are applied to. This lets us apply the transition exclusively to a subset of properties without affecting other property changes.
Syntax
There are two syntaxes that we can use to write our CSS transitions:
1. Individual properties
This syntax involves listing each transition property prefixed by the word transition (lines 5 to 8). The code snippet below shows how to add an opacity change transition using this method.
2. Short-hand syntax
The short-hand syntax lets us write all the properties in a single line in the following order: ...