> For the complete documentation index, see [llms.txt](https://spectrecss.angular-package.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://spectrecss.angular-package.dev/mixin/transition.md).

# transition()

{% code title="" lineNumbers="true" %}

```scss
@mixin transition($properties...) {
  $transition: '';
  @each $property in $properties {
    @if list.length($property) > 1 {
      $timing-function: '';
      @if (list.length($property) == 3) {
        $timing-function: list.nth($property, 3);
      }
      $transition: #{$transition}, #{list.nth($property, 1)} calc(get-var('transition-duration') + list.nth($property, 2)) #{$timing-function};
    } @else {
      $transition: #{$transition}, #{$property} get-var('transition-duration');
    }
  }
  transition: $transition;
}
```

{% endcode %}