# transition-mixin

> A Sass mixin for composing CSS transitions

Latest version **1.5.2** (published 2026-09-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install transition-mixin
pnpm add transition-mixin
yarn add transition-mixin
bun add transition-mixin
```

## Health

**Score 60/100 (C)** — status: active.

Positive: esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 1.5.2 |
| Published | 2026-09-27 |
| First published | 2017-10-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 5.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 8 |
| Author | Niklas Köhler |
| Maintainers | nikflip |
| Keywords | sass, transition, mixin |

## Links

- npm: https://www.npmjs.com/package/transition-mixin
- Repository: https://github.com/NikFlip/transition-mixin
- Homepage: https://github.com/NikFlip/transition-mixin#readme
- Issues: https://github.com/NikFlip/transition-mixin/issues
- npm.io page: https://npm.io/package/transition-mixin

## Recent versions

- 1.5.2 (latest) — 2026-09-27
- 1.5.1 — 2026-08-05
- 1.5.0 — 2026-06-15
- 1.4.3 — 2024-06-17
- 1.4.2 — 2022-11-11
- 1.4.1 — 2021-09-03
- 1.4.0 — 2021-08-17
- 1.3.1 — 2021-05-10
- 1.3.0 — 2020-12-07
- 1.2.6 — 2020-11-08
- 1.2.5 — 2020-07-16
- 1.2.4 — 2020-03-27
- 1.2.3 — 2020-01-29
- 1.2.2 — 2020-01-29
- 1.2.0 — 2018-11-14
- … 5 more at https://npm.io/package/transition-mixin/versions

## README

# SCSS Transition Mixin

A small Sass mixin for composing one or more CSS transitions.

## Installation

```shell
npm install transition-mixin
```

Load the package with the Sass module system:

```scss
@use 'pkg:transition-mixin' as transition;
```

## Usage

Pass one or more CSS property names to use the default duration and timing
function:

```scss
@use 'pkg:transition-mixin' as transition;

.button {
    @include transition.transition-mixin(
        border-color,
        box-shadow,
        background-size
    );
}
```

This produces:

```css
.button {
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-size 0.25s ease;
}
```

Use a map when a transition needs individual settings:

```scss
@use 'pkg:transition-mixin' as transition;

$background-transition: (
    property: background-size,
    duration: 0.4s,
    delay: 0.1s,
    timing-function: cubic-bezier(0.44, -0.55, 0.24, 2.7),
);

.button {
    @include transition.transition-mixin(
        border-color,
        box-shadow,
        $background-transition
    );
}
```

This produces:

```css
.button {
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-size 0.4s 0.1s cubic-bezier(0.44, -0.55, 0.24, 2.7);
}
```

## Options

Each map supports the following optional keys:

| Key | Default | Description |
| --- | --- | --- |
| `property` | `all` | CSS property to transition |
| `duration` | `0.25s` | Transition duration |
| `delay` | omitted | Delay before the transition starts |
| `timing-function` | `ease` | CSS transition timing function |

Property names and map values may be quoted or unquoted. CSS functions and
custom properties such as `cubic-bezier()` and `var()` are supported.

At least one property name or options map is required.

## Development

Install the development dependencies and run the test suite:

```shell
npm ci
npm test
```

The tests use [Sass True](https://www.oddbird.net/true/) with Node's built-in
test runner.

## License

[MIT](LICENSE)

---
_Source: https://npm.io/package/transition-mixin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._