Norska adds more utilities to Tailwind default animation and transitions.

The main change is that the .delay-*, .duration-* and .ease-* transition classes are also usable on animations. The .loop-*, .animate-play and .animate-pause classes are also added.

The default duration-* and delay-* scales are expressed in seconds while the steps starting with 0 are in hundreds of milliseconds.

Default animation and transitions

Class
Example
.animate-spin
.animate-ping
.animate-pulse
Aa
.animate-bounce
.transition-colors
Hover me
.transition-dimensions
Hover me
.transition-opacity
Hover me
.transition-transform
Hover me

Variations

Class
Example
.duration-30
Hover me
.duration-03
.delay-03
Hover me
.ease-in
.ease-out
.ease-in
Hover me
.ease-out
Hover me
.ease-linear
Hover me
.loop-2
.hover_animate-pause
.hover_animate-play

Duration

The .duration-* classes control both the transition and animation durations.

Class
Duration
.duration-default
200ms
.duration-0
0s
.duration-01
100ms
.duration-02
200ms
.duration-03
300ms
.duration-05
500ms
.duration-07
700ms
.duration-1
1s
.duration-2
2s
.duration-5
5s
.duration-10
10s
.duration-12
12s
.duration-30
30s
.duration-45
45s
.duration-60
60s

Delay

The .delay-* classes control the time to wait before starting the animation/transition.

Class
Delay
.delay-default
0s
.delay-0
0s
.delay-01
100ms
.delay-02
200ms
.delay-03
300ms
.delay-05
500ms
.delay-07
700ms
.delay-1
1s
.delay-2
2s
.delay-5
5s
.delay-10
10s

Easing

The .ease-* classes control the animation/transition easing curve.

Class
Function
.ease-default
linear
.ease-in
cubic-bezier(0.4, 0, 1, 1)
.ease-in-out
cubic-bezier(0.4, 0, 0.2, 1)
.ease-linear
linear
.ease-out
cubic-bezier(0, 0, 0.2, 1)

Loop

The .loop-* classes control how many times an animation should run.

Class
Count
.loop-default
infinite
.loop-1
1
.loop-2
2
.loop-3
3
.loop-always
infinite

Play/Pause

The following classes can control the animation play state.nimation. They prove most useful when applied on :hover.

Class
Play state
.animate-default
running
.animate-pause
paused
.animate-paused
paused
.animate-play
running
.animate-running
running

Limitations

Due to the nature of animations, not all scenarios can be covered with utility classes. For example, the utility classes provided can only change the easing method of the whole animation, not of a specific keyframe.