Animations

Animation Blur

Utilities for sets the blur animation to an element.

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
blur-in	@keyframes blur-in { from { opacity: 0; filter: blur(4px) } to { opacity: 1; filter: blur(0) }}	Text
blur-out	@keyframes blur-out { from { opacity: 1; filter: blur(0) } to { opacity: 1; filter: blur(4px) }}	Text

Usage

Set basic blur animation.

<div class="morph blur-in">
  ...
</div>

HTML

.dummy {
  @extend
    .morph,
    .blur-in;
}

SCSS

Mix with duration.

<div class="morph blur-in duration-2000">
  ...
</div>

HTML

.dummy {
  @extend
    .morph,
    .blur-in,
    .duration-2000;
}

SCSS

Mix with duration and delay.

<div class="morph blur-in duration-2000 delay-2">
  ...
</div>

HTML

.dummy {
  @extend
    .morph,
    .blur-in,
    .duration-2000,
    .delay-2;
}

SCSS

Mix with duration, delay and infinite looping.

<div class="morph blur-in duration-2000 delay-2 loop-infinite">
  ...
</div>

HTML

.dummy {
  @extend
    .morph,
    .blur-in,
    .duration-2000,
    .delay-2,
    .loop-infinite;
}

SCSS

Apply (hover) variant,

<div class="morph (hover)blur-in">
  ...
</div>

HTML

.dummy {
  @extend
    .morph,
    .(hover)blur-in;
}

SCSS