Skip to content

Instantly share code, notes, and snippets.

@owenconti
Created May 19, 2020 01:55
Show Gist options
  • Save owenconti/b9f1fef42a2cc2275b0214ac699fb4d5 to your computer and use it in GitHub Desktop.
Save owenconti/b9f1fef42a2cc2275b0214ac699fb4d5 to your computer and use it in GitHub Desktop.
Using CSS transitions with TailwindCSS v1.2
<button class="opacity-50 hover:opacity-100 transition-opacity duration-1000 ease-out">...</button>
<button class="inline-block opacity-50 hover:opacity-100 transition-opacity duration-1000 ease-out bg-red-500 text-white p-2 rounded">Hover me to see the transition<button>
none: 'none',
all: 'all',
default: 'background-color, border-color, color, opacity, transform',
colors: 'background-color, border-color, color',
opacity: 'opacity',
transform: 'transform',
'75': '75ms',
'100': '100ms',
'150': '150ms',
'200': '200ms',
'300': '300ms',
'500': '500ms',
'700': '700ms',
'1000': '1000ms',
linear: 'linear',
in: 'cubic-bezier(0.4, 0, 1, 1)',
out: 'cubic-bezier(0, 0, 0.2, 1)',
'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment