Animations in Angular/

...

/

Configurable Properties

Configurable Properties

Learn the configurable properties of CSS transitions and how we can customize them in our application.

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.

Press + to interact

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.

Press + to interact
// main.scss
.my-element {
  opacity: 1;
  transition-property: opacity;
  transition-duration: 2s;
  transition-delay: 0.5s;
  transition-timing-function: ease-in;
&:hover {
  opacity: 0.5
}
}

2. Short-hand syntax

The short-hand syntax lets us write all the properties in a single line in the following order:

Press + to interact
transition: <property> <duration> <timing-function> <delay>

So, the opacity ...