Transition Timing
There are 3 available transition durations, which define the speed of an animation/transition.
.75s
3s
7s
<div class="u-hover:scale--125 u-duration-75"></div>
<div class="u-hover:scale--125 u-duration-300"></div>
<div class="u-hover:scale--125 u-duration-700"></div>Transition Easing
Easing and cubic bezier examples using our predefined classes.
3s
3s
3s
3s
3s
Linear
Default (Ease In Out)
Scale In
Scale Out
Spring
<!-- No Curve. Good for color/opacity fades. -->
<div class="u-hover:scale--125 u-duration-300 u-easing-linear"></div>
<!-- Slight curve. Good for subtle transitions -->
<div class="u-hover:scale--125 u-duration-300 u-easing-default"></div>
<!-- Starts fast and decelerates as it progresses-->
<div class="u-hover:scale--125 u-duration-300 u-easing-scalein"></div>
<!-- Starts slow and accelerates as it progresses -->
<div class="u-hover:scale--125 u-duration-300 u-easing-scaleout"></div>
<!-- Springy feel. Good for drawing focus -->
<div class="u-hover:scale--125 u-duration-300 u-easing-spring"></div><!-- No Curve. Good for color/opacity fades. -->
<div class="u-hover:slide-ltr u-duration-300 u-easing-linear"></div>
<!-- Slight curve. Good for subtle transitions -->
<div class="u-hover:slide-ltr u-duration-300 u-easing-default"></div>
<!-- Starts fast and decelerates as it progresses-->
<div class="u-hover:slide-ltr u-duration-300 u-easing-scalein"></div>
<!-- Starts slow and accelerates as it progresses -->
<div class="u-hover:slide-ltr u-duration-300 u-easing-scaleout"></div>
<!-- Springy feel. Good for drawing focus -->
<div class="u-hover:slide-ltr u-duration-300 u-easing-spring"></div>Pre-determined Animations
A set of simple pre-determined animations to use on elements and components.
Highlight
<button class="c-btn c-btn--lg c-btn--positive" type="button" disabled>
<svg class="c-icon | u-animate-spin u-mr-sm" viewbox="0 0 24 24" aria-hidden="true">
<circle class="u-muted:25%" fill="none" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="u-muted:75%" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
Working ...
</button><div class="c-card | u-p u-relative">
<span class="c-pointer | u-absolute u-top-0 u-right-0"></span>
Highlight
</div>Alpine examples
A set of animation examples using alpines transition directives.
<div class="u-h-12 u-flex u-align-middle u-justify-center">
<button class="c-btn" @click="animate = ! animate">
Toggle
</button>
<div class="u-bg-night-sky u-aspect u-round u-w-4 u-ml-lg" style="display: none !important;"
x-show="animate"
x-transition:enter="u-transition u-easing-scalein u-duration-700"
x-transition:enter-start="u-opacity:0% u-translate-y-n100%"
x-transition:enter-end="u-opacity:100% u-translate-y-0"
x-transition:leave="u-transition u-easing-scalein u-duration-700"
x-transition:leave-start="u-opacity:100% u-translate-y-0"
x-transition:leave-end="u-opacity:0% u-translate-y-100%">
<div class="u-flex u-justify-center u-align-middle u-h-100%">
<svg class="c-icon u-dark" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<g fill="none" fill-rule="evenodd">
<path stroke-linecap="round" stroke-width="1.5" d="m3 9 5 5 5-5M8 1.5V14"/>
</g>
</svg>
</div>
</div>
</div><div class="u-h-12 u-flex u-align-middle u-justify-center">
<button class="c-btn" @click="animate = ! animate">
Toggle
</button>
<div class="u-bg-night-sky u-aspect u-round u-w-4 u-ml-lg" style="display: none !important;"
x-show="animate"
x-transition:enter="u-transition u-easing-scalein u-duration-700"
x-transition:enter-start="u-opacity:0% u-translate-y-100%"
x-transition:enter-end="u-opacity:100% u-translate-y-0"
x-transition:leave="u-transition u-easing-scalein u-duration-700"
x-transition:leave-start="u-opacity:100$ u-translate-y-0"
x-transition:leave-end="u-opacity:0% u-translate-y-n100%">
<div class="u-flex u-justify-center u-align-middle u-h-100%">
<svg class="c-icon u-dark" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<g fill="none" fill-rule="evenodd">
<path stroke-linecap="round" stroke-width="1.5" d="M8 14.5V3M3 7l5-5 5 5"/>
</g>
</svg>
</div>
</div>
</div>