Filters

Smooth Filter Animation

Utilities for sets filter utilities on-hover animation speed when selection-hover variant applied.

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-hover Visited

API

class	css
smooth `{duration}`	filter: brightness(var(--brightness)) contrast(var(--contrast)) saturate(var(--saturate)) blur(var(--blur)) drop-shadow(var(--drop-shadow)); transition: filter `{duration}` linear, transform `{duration}` linear;

class	css
smooth-75	transition: filter 75ms linear, transform 75ms linear;
smooth-100	transition: filter 100ms linear, transform 100ms linear;
smooth-150	transition: filter 150ms linear, transform 150ms linear;
smooth-200	transition: filter 200ms linear, transform 200ms linear;
smooth-300	transition: filter 300ms linear, transform 300ms linear;
smooth-500	transition: filter 500ms linear, transform 500ms linear;
smooth-700	transition: filter 700ms linear, transform 700ms linear;
smooth-1000	transition: filter 1000ms linear, transform 1000ms linear;

Usage

i Hover images to see filter animation.

<!-- parent -->
<div class="(selection-hover)filter brightness-2 saturate-0 blur-10 smooth-200 ... flex flex-wrap flex-gap-4 justify-center items-center">
  <!-- child -->
  <div>
    <img class="filter ... width-24 height-24" src="...">
  </div>
  <div>
    <img class="filter ... width-24 height-24" src="...">
  </div>
  <div>
    <img class="filter ... width-24 height-24" src="...">
  </div>
</div>

HTML

.dummy-parent {
  @extend
    (selection-hover)filter,
    .brightness-2,
    .saturate-0,
    .blur-10,
    .smooth-200,
    .flex,
    .flex-wrap,
    .flex-gap-4,
    .justify-center,
    .items-center;
}
.dummy-child {
  @extend
    .filter,
    .width-24,
    .height-24;
}

SCSS