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.
The .duration-*
classes control both the transition and animation
durations.
The .delay-*
classes control the time to wait before starting the animation/transition.
The .ease-*
classes control the animation/transition easing curve.
The .loop-*
classes control how many times an animation should run.
The following classes can control the animation play state.nimation. They prove most useful when applied on :hover
.
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.