# Transition property

> Utilities for controlling which CSS properties are subject to transitions.

Source: https://www.zenplates.co/documentation/utilities/transition-property (Utilities › Effects)

| Class                   | Properties                                                                  |
| ----------------------- | --------------------------------------------------------------------------- |
| `.transition-none`      | `transition-property: none;`                                                |
| `.transition-all`       | `transition-property: all;`                                                 |
| `.transition-colors`    | `transition-property: background-color, border-color, color, fill, stroke;` |
| `.transition-opacity`   | `transition-property: opacity;`                                             |
| `.transition-shadow`    | `transition-property: box-shadow;`                                          |
| `.transition-transform` | `transition-property: transform;`                                           |

## Usage

Use `transition-{properties}` to specify which CSS properties should be subject to transition effects.

Use `.transition` to apply the standard transition duration (as defined in the `$transition-duration` Sass variable) to *all* CSS properties for a given element.

## Variants

By default, no responsive or hover-state variants are generated for transition property utilities.

### Responsive

To include responsive variants like `.md:transition-colors`, add `"transition-property"` to the `$responsive-variants` variable in your theme's `_variables.scss` file when [recompiling your CSS](https://www.zenplates.co/documentation/customization/using-sass-source-files):

```scss
$responsive-variants: (
  // ...
  "transition-property",
);
```

### Hover-state

To include hover-state variants like `.hover:transition-colors`, add `"transition-property"` to the `$hover-variants` variable when recompiling your CSS:

```scss
$hover-variants: (
  // ...
  "transition-property",
);
```