Developers - CSS Layout System
Utilities Transitions
Transitions is a collection of micro-classes to control transitions.
Abbreviations:
Prefix | Function |
---|---|
.trs- | transition-name |
.trsde- | transition-delay |
.trsdu- | transition-duration |
.trstf- | transition-timing-function |
To trigger a transition, add the class trs
to the element.
You should only add the class to the outermost element with a trs-
class, children will be animated automatically.
Transitions
Fade
Name | Value |
---|---|
.trs-fdd | Fade Down |
.trs-fdl | Fade Down Left |
.trs-fdr | Fade Down Right |
.trs-fal | Fade Left |
.trs-far | Fade Right |
.trs-fau | Fade Up |
.trs-ful | Fade Up Left |
.trs-fur | Fade Up Right |
Flip
Name | Value |
---|---|
.trs-fld | Flip Down |
.trs-fll | Flip Left |
.trs-flr | Flip Right |
.trs-flu | Flip Up |
Zoom
Name | Value |
---|---|
.trs-zoi | Zoom In |
.trs-zod | Zoom In Down |
.trs-ziu | Zoom In Up |
.trs-zoo | Zoom Out |
Delays
Name | Value |
---|---|
.trsde-0 | 0ms |
.trsde-25 | 25ms |
.trsde-50 | 50ms |
.trsde-75 | 75ms |
.trsde-100 | 100ms |
.trsde-150 | 150ms |
.trsde-250 | 250ms |
.trsde-375 | 375ms |
.trsde-500 | 500ms |
.trsde-750 | 750ms |
.trsde-1000 | 1000ms |
.trsde-1500 | 1500ms |
.trsde-2000 | 2000ms |
Duration
Name | Value |
---|---|
.trsdu-100 | 100ms |
.trsdu-200 | 200ms |
.trsdu-300 | 300ms |
.trsdu-400 | 400ms |
.trsdu-500 | 500ms |
.trsdu-750 | 750ms |
.trsdu-1000 | 1000ms |
.trsdu-1500 | 1500ms |
.trsdu-2000 | 2000ms |
Timing Functions (Easings)
Name | Value |
---|---|
.trstf-eas-1 | ease-1 |
.trstf-eas-2 | ease-2 |
.trstf-eas-3 | ease-3 |
.trstf-eas-4 | ease-4 |
.trstf-eas-5 | ease-5 |
.trstf-eai-1 | ease-in-1 |
.trstf-eai-2 | ease-in-2 |
.trstf-eai-3 | ease-in-3 |
.trstf-eai-4 | ease-in-4 |
.trstf-eai-5 | ease-in-5 |
.trstf-eao-1 | ease-out-1 |
.trstf-eao-2 | ease-out-2 |
.trstf-eao-3 | ease-out-3 |
.trstf-eao-4 | ease-out-4 |
.trstf-eao-5 | ease-out-5 |
.trstf-eio-1 | ease-in-out-1 |
.trstf-eio-2 | ease-in-out-2 |
.trstf-eio-3 | ease-in-out-3 |
.trstf-eio-4 | ease-in-out-4 |
.trstf-eio-5 | ease-in-out-5 |
.trstf-eel-1 | ease-elastic-1 |
.trstf-eel-2 | ease-elastic-2 |
.trstf-eel-3 | ease-elastic-3 |
.trstf-eel-4 | ease-elastic-4 |
.trstf-eel-5 | ease-elastic-5 |
.trstf-esq-1 | ease-squish-1 |
.trstf-esq-2 | ease-squish-2 |
.trstf-esq-3 | easing-squish-3 |
.trstf-esq-4 | easing-squish-4 |
.trstf-esq-5 | easing-squish-5 |
.trstf-lin | linear |
Example
<div class="trsde-250"> <!-- master delay 250ms -->
<img src="assets/image.jpg" alt="" class="trs-fur"> <!-- fade-up-right -->
<div>
<strong class="trs-fdr">Tagline</strong> <!-- fade-down-right -->
<h2 class="trs-fdd">Headline</h2> <!-- fade-down -->
<button class="trs-fau">CTA</button> <!-- fade-up -->
</div>
</div>
</div>
To trigger these transitions, add the class trs
to the outermost element.