archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #2108 from tailwindlabs/add-keyframes-as-utilities

Browse Source 
Add keyframes as utilities instead of base
This commit is contained in:
Adam Wathan 2020-08-02 08:12:32 -04:00 committed by GitHub
commit 911afff6e8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 178 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
__tests__/fixtures/tailwind-output-ie11.css
View File

@ -577,50 +577,6 @@ video {
height: auto;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes ping {
0% {
transform: scale(1);
opacity: 1;
}
75%, 100% {
transform: scale(2);
opacity: 0;
}
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: .5;
}
}
@keyframes bounce {
0%, 100% {
transform: translateY(-25%);
animation-timing-function: cubic-bezier(0.8,0,1,1);
}
50% {
transform: translateY(0);
animation-timing-function: cubic-bezier(0,0,0.2,1);
}
}
.container {
width: 100%;
}
@ -10994,6 +10950,50 @@ video {
transition-delay: 1000ms;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes ping {
0% {
transform: scale(1);
opacity: 1;
}
75%, 100% {
transform: scale(2);
opacity: 0;
}
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: .5;
}
}
@keyframes bounce {
0%, 100% {
transform: translateY(-25%);
animation-timing-function: cubic-bezier(0.8,0,1,1);
}
50% {
transform: translateY(0);
animation-timing-function: cubic-bezier(0,0,0.2,1);
}
}
.animate-none {
animation: none;
}

88
__tests__/fixtures/tailwind-output-important.css
View File

@ -577,50 +577,6 @@ video {
height: auto;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes ping {
0% {
transform: scale(1);
opacity: 1;
}
75%, 100% {
transform: scale(2);
opacity: 0;
}
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: .5;
}
}
@keyframes bounce {
0%, 100% {
transform: translateY(-25%);
animation-timing-function: cubic-bezier(0.8,0,1,1);
}
50% {
transform: translateY(0);
animation-timing-function: cubic-bezier(0,0,0.2,1);
}
}
.container {
width: 100%;
}
@ -14416,6 +14372,50 @@ video {
transition-delay: 1000ms !important;
}
@keyframes spin {
from {
transform: rotate(0deg) !important;
}
to {
transform: rotate(360deg) !important;
}
}
@keyframes ping {
0% {
transform: scale(1) !important;
opacity: 1 !important;
}
75%, 100% {
transform: scale(2) !important;
opacity: 0 !important;
}
}
@keyframes pulse {
0%, 100% {
opacity: 1 !important;
}
50% {
opacity: .5 !important;
}
}
@keyframes bounce {
0%, 100% {
transform: translateY(-25%) !important;
animation-timing-function: cubic-bezier(0.8,0,1,1) !important;
}
50% {
transform: translateY(0) !important;
animation-timing-function: cubic-bezier(0,0,0.2,1) !important;
}
}
.animate-none {
animation: none !important;
}

88
__tests__/fixtures/tailwind-output-no-color-opacity.css
View File

@ -577,50 +577,6 @@ video {
height: auto;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes ping {
0% {
transform: scale(1);
opacity: 1;
}
75%, 100% {
transform: scale(2);
opacity: 0;
}
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: .5;
}
}
@keyframes bounce {
0%, 100% {
transform: translateY(-25%);
animation-timing-function: cubic-bezier(0.8,0,1,1);
}
50% {
transform: translateY(0);
animation-timing-function: cubic-bezier(0,0,0.2,1);
}
}
.container {
width: 100%;
}
@ -11968,6 +11924,50 @@ video {
transition-delay: 1000ms;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes ping {
0% {
transform: scale(1);
opacity: 1;
}
75%, 100% {
transform: scale(2);
opacity: 0;
}
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: .5;
}
}
@keyframes bounce {
0%, 100% {
transform: translateY(-25%);
animation-timing-function: cubic-bezier(0.8,0,1,1);
}
50% {
transform: translateY(0);
animation-timing-function: cubic-bezier(0,0,0.2,1);
}
}
.animate-none {
animation: none;
}

88
__tests__/fixtures/tailwind-output.css
View File

@ -577,50 +577,6 @@ video {
height: auto;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes ping {
0% {
transform: scale(1);
opacity: 1;
}
75%, 100% {
transform: scale(2);
opacity: 0;
}
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: .5;
}
}
@keyframes bounce {
0%, 100% {
transform: translateY(-25%);
animation-timing-function: cubic-bezier(0.8,0,1,1);
}
50% {
transform: translateY(0);
animation-timing-function: cubic-bezier(0,0,0.2,1);
}
}
.container {
width: 100%;
}
@ -14416,6 +14372,50 @@ video {
transition-delay: 1000ms;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes ping {
0% {
transform: scale(1);
opacity: 1;
}
75%, 100% {
transform: scale(2);
opacity: 0;
}
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: .5;
}
}
@keyframes bounce {
0%, 100% {
transform: translateY(-25%);
animation-timing-function: cubic-bezier(0.8,0,1,1);
}
50% {
transform: translateY(0);
animation-timing-function: cubic-bezier(0,0,0.2,1);
}
}
.animate-none {
animation: none;
}

4
src/plugins/animation.js
View File

@ -1,14 +1,14 @@
import _ from 'lodash'
export default function() {
return function({ addBase, addUtilities, e, theme, variants }) {
return function({ addUtilities, e, theme, variants }) {
const keyframesConfig = theme('keyframes')
const keyframesStyles = _.fromPairs(
_.toPairs(keyframesConfig).map(([name, keyframes]) => {
return [`@keyframes ${name}`, keyframes]
})
)
addBase(keyframesStyles)
addUtilities(keyframesStyles)
const animationConfig = theme('animation')
const utilities = _.fromPairs(