knowledge/awesome-cheatsheets
1
1
Fork 0
mirror of https://github.com/namibia/awesome-cheatsheets.git synced 2024-12-20 09:10:48 +00:00
Code Issues Releases Activity

docs(tailwind): transitions

Browse Source
This commit is contained in:
Julien Le Coupanec 2020-03-29 17:59:52 +02:00
parent 330f8970f4
commit 2c7445ee21
1 changed files with 28 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/tailwind.css
View File

@ -1934,23 +1934,45 @@
* TRANSITION PROPERTY * TRANSITION PROPERTY
* -------------------- * --------------------
* Utilities for controlling which CSS properties transition. * Utilities for controlling which CSS properties transition.
* * By default, only responsive variants are generated for transition-property utilities.
*/ */
.transition-none /* transition-property: none; */
.transition-all /* transition-property: all; */
.transition /* transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform; */
.transition-colors /* transition-property: background-color, border-color, color, fill, stroke; */
.transition-opacity /* transition-property: opacity; */
.transition-shadow /* transition-property: box-shadow; */
.transition-transform /* transition-property: transform; */
/* /*
* TRANSITION DURATION * TRANSITION DURATION
* -------------------- * --------------------
* Utilities for controlling the duration of CSS transitions. * Utilities for controlling the duration of CSS transitions.
* * By default, only responsive variants are generated for transition-duration utilities.
*/ */
.duration-75 /* transition-duration: 75ms; */
.duration-100 /* transition-duration: 100ms; */
.duration-150 /* transition-duration: 150ms; */
.duration-200 /* transition-duration: 200ms; */
.duration-300 /* transition-duration: 300ms; */
.duration-500 /* transition-duration: 500ms; */
.duration-700 /* transition-duration: 700ms; */
.duration-1000 /* transition-duration: 1000ms; */
/* /*
* TRANSITION TIMING FUNCTION * TRANSITION TIMING FUNCTION
* -------------------- * --------------------
* Utilities for controlling the easing of CSS transitions. * Utilities for controlling the easing of CSS transitions.
* * By default, only responsive variants are generated for transition-timing-function utilities.
*/ */
.ease-linear /* transition-timing-function: linear; */
.ease-in /* transition-timing-function: cubic-bezier(0.4, 0, 1, 1); */
.ease-out /* transition-timing-function: cubic-bezier(0, 0, 0.2, 1); */
.ease-in-out /* transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); */
/* ******************************************************************************************* /* *******************************************************************************************
* TRANSFORMS * TRANSFORMS
* ******************************************************************************************* */ * ******************************************************************************************* */