From 29b0739c353945ed474c350a7c0882fa526da50a Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 24 Jul 2020 11:52:47 -0400 Subject: [PATCH 1/3] Add basic set of general purpose animation utilities --- __tests__/fixtures/tailwind-output-ie11.css | 144 ++++++++++++++++++ .../fixtures/tailwind-output-important.css | 144 ++++++++++++++++++ .../tailwind-output-no-color-opacity.css | 144 ++++++++++++++++++ __tests__/fixtures/tailwind-output.css | 144 ++++++++++++++++++ src/corePlugins.js | 2 + src/plugins/animation.js | 24 +++ stubs/defaultConfig.stub.js | 32 ++++ 7 files changed, 634 insertions(+) create mode 100644 src/plugins/animation.js diff --git a/__tests__/fixtures/tailwind-output-ie11.css b/__tests__/fixtures/tailwind-output-ie11.css index 760a22cf8..c12278570 100644 --- a/__tests__/fixtures/tailwind-output-ie11.css +++ b/__tests__/fixtures/tailwind-output-ie11.css @@ -577,6 +577,50 @@ 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 fade { + 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%; } @@ -10950,6 +10994,26 @@ video { transition-delay: 1000ms; } +.animate-none { + animation: none; +} + +.animate-spin { + animation: spin 1s linear infinite; +} + +.animate-ping { + animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; +} + +.animate-fade { + animation: fade 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; +} + +.animate-bounce { + animation: bounce 1s infinite; +} + .example { font-weight: 700; color: #f56565; @@ -21329,6 +21393,26 @@ video { transition-delay: 1000ms; } + .sm\:animate-none { + animation: none; + } + + .sm\:animate-spin { + animation: spin 1s linear infinite; + } + + .sm\:animate-ping { + animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; + } + + .sm\:animate-fade { + animation: fade 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; + } + + .sm\:animate-bounce { + animation: bounce 1s infinite; + } + .sm\:example { font-weight: 700; color: #f56565; @@ -31709,6 +31793,26 @@ video { transition-delay: 1000ms; } + .md\:animate-none { + animation: none; + } + + .md\:animate-spin { + animation: spin 1s linear infinite; + } + + .md\:animate-ping { + animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; + } + + .md\:animate-fade { + animation: fade 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; + } + + .md\:animate-bounce { + animation: bounce 1s infinite; + } + .md\:example { font-weight: 700; color: #f56565; @@ -42089,6 +42193,26 @@ video { transition-delay: 1000ms; } + .lg\:animate-none { + animation: none; + } + + .lg\:animate-spin { + animation: spin 1s linear infinite; + } + + .lg\:animate-ping { + animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; + } + + .lg\:animate-fade { + animation: fade 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; + } + + .lg\:animate-bounce { + animation: bounce 1s infinite; + } + .lg\:example { font-weight: 700; color: #f56565; @@ -52469,6 +52593,26 @@ video { transition-delay: 1000ms; } + .xl\:animate-none { + animation: none; + } + + .xl\:animate-spin { + animation: spin 1s linear infinite; + } + + .xl\:animate-ping { + animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; + } + + .xl\:animate-fade { + animation: fade 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; + } + + .xl\:animate-bounce { + animation: bounce 1s infinite; + } + .xl\:example { font-weight: 700; color: #f56565; diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css index 0949bc69e..00d675299 100644 --- a/__tests__/fixtures/tailwind-output-important.css +++ b/__tests__/fixtures/tailwind-output-important.css @@ -577,6 +577,50 @@ 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 fade { + 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%; } @@ -14336,6 +14380,26 @@ video { transition-delay: 1000ms !important; } +.animate-none { + animation: none !important; +} + +.animate-spin { + animation: spin 1s linear infinite !important; +} + +.animate-ping { + animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite !important; +} + +.animate-fade { + animation: fade 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important; +} + +.animate-bounce { + animation: bounce 1s infinite !important; +} + .example { font-weight: 700; color: #f56565; @@ -28101,6 +28165,26 @@ video { transition-delay: 1000ms !important; } + .sm\:animate-none { + animation: none !important; + } + + .sm\:animate-spin { + animation: spin 1s linear infinite !important; + } + + .sm\:animate-ping { + animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite !important; + } + + .sm\:animate-fade { + animation: fade 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important; + } + + .sm\:animate-bounce { + animation: bounce 1s infinite !important; + } + .sm\:example { font-weight: 700; color: #f56565; @@ -41867,6 +41951,26 @@ video { transition-delay: 1000ms !important; } + .md\:animate-none { + animation: none !important; + } + + .md\:animate-spin { + animation: spin 1s linear infinite !important; + } + + .md\:animate-ping { + animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite !important; + } + + .md\:animate-fade { + animation: fade 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important; + } + + .md\:animate-bounce { + animation: bounce 1s infinite !important; + } + .md\:example { font-weight: 700; color: #f56565; @@ -55633,6 +55737,26 @@ video { transition-delay: 1000ms !important; } + .lg\:animate-none { + animation: none !important; + } + + .lg\:animate-spin { + animation: spin 1s linear infinite !important; + } + + .lg\:animate-ping { + animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite !important; + } + + .lg\:animate-fade { + animation: fade 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important; + } + + .lg\:animate-bounce { + animation: bounce 1s infinite !important; + } + .lg\:example { font-weight: 700; color: #f56565; @@ -69399,6 +69523,26 @@ video { transition-delay: 1000ms !important; } + .xl\:animate-none { + animation: none !important; + } + + .xl\:animate-spin { + animation: spin 1s linear infinite !important; + } + + .xl\:animate-ping { + animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite !important; + } + + .xl\:animate-fade { + animation: fade 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important; + } + + .xl\:animate-bounce { + animation: bounce 1s infinite !important; + } + .xl\:example { font-weight: 700; color: #f56565; diff --git a/__tests__/fixtures/tailwind-output-no-color-opacity.css b/__tests__/fixtures/tailwind-output-no-color-opacity.css index cc84a1b6e..f0960cb8c 100644 --- a/__tests__/fixtures/tailwind-output-no-color-opacity.css +++ b/__tests__/fixtures/tailwind-output-no-color-opacity.css @@ -577,6 +577,50 @@ 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 fade { + 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%; } @@ -11888,6 +11932,26 @@ video { transition-delay: 1000ms; } +.animate-none { + animation: none; +} + +.animate-spin { + animation: spin 1s linear infinite; +} + +.animate-ping { + animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; +} + +.animate-fade { + animation: fade 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; +} + +.animate-bounce { + animation: bounce 1s infinite; +} + .example { font-weight: 700; color: #f56565; @@ -23205,6 +23269,26 @@ video { transition-delay: 1000ms; } + .sm\:animate-none { + animation: none; + } + + .sm\:animate-spin { + animation: spin 1s linear infinite; + } + + .sm\:animate-ping { + animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; + } + + .sm\:animate-fade { + animation: fade 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; + } + + .sm\:animate-bounce { + animation: bounce 1s infinite; + } + .sm\:example { font-weight: 700; color: #f56565; @@ -34523,6 +34607,26 @@ video { transition-delay: 1000ms; } + .md\:animate-none { + animation: none; + } + + .md\:animate-spin { + animation: spin 1s linear infinite; + } + + .md\:animate-ping { + animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; + } + + .md\:animate-fade { + animation: fade 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; + } + + .md\:animate-bounce { + animation: bounce 1s infinite; + } + .md\:example { font-weight: 700; color: #f56565; @@ -45841,6 +45945,26 @@ video { transition-delay: 1000ms; } + .lg\:animate-none { + animation: none; + } + + .lg\:animate-spin { + animation: spin 1s linear infinite; + } + + .lg\:animate-ping { + animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; + } + + .lg\:animate-fade { + animation: fade 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; + } + + .lg\:animate-bounce { + animation: bounce 1s infinite; + } + .lg\:example { font-weight: 700; color: #f56565; @@ -57159,6 +57283,26 @@ video { transition-delay: 1000ms; } + .xl\:animate-none { + animation: none; + } + + .xl\:animate-spin { + animation: spin 1s linear infinite; + } + + .xl\:animate-ping { + animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; + } + + .xl\:animate-fade { + animation: fade 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; + } + + .xl\:animate-bounce { + animation: bounce 1s infinite; + } + .xl\:example { font-weight: 700; color: #f56565; diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index 97596e0bc..6d9ec00c9 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -577,6 +577,50 @@ 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 fade { + 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%; } @@ -14336,6 +14380,26 @@ video { transition-delay: 1000ms; } +.animate-none { + animation: none; +} + +.animate-spin { + animation: spin 1s linear infinite; +} + +.animate-ping { + animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; +} + +.animate-fade { + animation: fade 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; +} + +.animate-bounce { + animation: bounce 1s infinite; +} + .example { font-weight: 700; color: #f56565; @@ -28101,6 +28165,26 @@ video { transition-delay: 1000ms; } + .sm\:animate-none { + animation: none; + } + + .sm\:animate-spin { + animation: spin 1s linear infinite; + } + + .sm\:animate-ping { + animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; + } + + .sm\:animate-fade { + animation: fade 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; + } + + .sm\:animate-bounce { + animation: bounce 1s infinite; + } + .sm\:example { font-weight: 700; color: #f56565; @@ -41867,6 +41951,26 @@ video { transition-delay: 1000ms; } + .md\:animate-none { + animation: none; + } + + .md\:animate-spin { + animation: spin 1s linear infinite; + } + + .md\:animate-ping { + animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; + } + + .md\:animate-fade { + animation: fade 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; + } + + .md\:animate-bounce { + animation: bounce 1s infinite; + } + .md\:example { font-weight: 700; color: #f56565; @@ -55633,6 +55737,26 @@ video { transition-delay: 1000ms; } + .lg\:animate-none { + animation: none; + } + + .lg\:animate-spin { + animation: spin 1s linear infinite; + } + + .lg\:animate-ping { + animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; + } + + .lg\:animate-fade { + animation: fade 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; + } + + .lg\:animate-bounce { + animation: bounce 1s infinite; + } + .lg\:example { font-weight: 700; color: #f56565; @@ -69399,6 +69523,26 @@ video { transition-delay: 1000ms; } + .xl\:animate-none { + animation: none; + } + + .xl\:animate-spin { + animation: spin 1s linear infinite; + } + + .xl\:animate-ping { + animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; + } + + .xl\:animate-fade { + animation: fade 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; + } + + .xl\:animate-bounce { + animation: bounce 1s infinite; + } + .xl\:example { font-weight: 700; color: #f56565; diff --git a/src/corePlugins.js b/src/corePlugins.js index f1211ba36..41e2f79ab 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -97,6 +97,7 @@ import backgroundOpacity from './plugins/backgroundOpacity' import borderOpacity from './plugins/borderOpacity' import textOpacity from './plugins/textOpacity' import placeholderOpacity from './plugins/placeholderOpacity' +import animation from './plugins/animation' import configurePlugins from './util/configurePlugins' @@ -201,5 +202,6 @@ export default function({ corePlugins: corePluginConfig }) { transitionTimingFunction, transitionDuration, transitionDelay, + animation, }) } diff --git a/src/plugins/animation.js b/src/plugins/animation.js new file mode 100644 index 000000000..49b9f7d26 --- /dev/null +++ b/src/plugins/animation.js @@ -0,0 +1,24 @@ +export default function() { + return function({ addBase, addUtilities, e, theme, variants }) { + const keyframesConfig = theme('keyframes') + const keyframesStyles = Object.fromEntries( + Object.entries(keyframesConfig).map(([name, keyframes]) => { + return [`@keyframes ${name}`, keyframes] + }) + ) + addBase(keyframesStyles) + + const animationConfig = theme('animation') + const utilities = Object.fromEntries( + Object.entries(animationConfig).map(([suffix, animation]) => { + return [ + `.${e(`animate-${suffix}`)}`, + { + animation, + }, + ] + }) + ) + addUtilities(utilities, variants('animation')) + } +} diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index bab7b16d4..d08b5cbd5 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -622,6 +622,37 @@ module.exports = { '700': '700ms', '1000': '1000ms', }, + animation: { + none: 'none', + spin: 'spin 1s linear infinite', + ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite', + fade: 'fade 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', + bounce: 'bounce 1s infinite', + }, + keyframes: { + spin: { + from: { transform: 'rotate(0deg)' }, + to: { transform: 'rotate(360deg)' }, + }, + ping: { + '0%': { transform: 'scale(1)', opacity: '1' }, + '75%, 100%': { transform: 'scale(2)', opacity: '0' }, + }, + fade: { + '0%, 100%': { opacity: '1' }, + '50%': { opacity: '.5' }, + }, + bounce: { + '0%, 100%': { + transform: 'translateY(-25%)', + animationTimingFunction: 'cubic-bezier(0.8,0,1,1)', + }, + '50%': { + transform: 'translateY(0)', + animationTimingFunction: 'cubic-bezier(0,0,0.2,1)', + }, + }, + }, }, variants: { accessibility: ['responsive', 'focus'], @@ -722,6 +753,7 @@ module.exports = { transitionTimingFunction: ['responsive'], transitionDuration: ['responsive'], transitionDelay: ['responsive'], + animation: ['responsive'], }, corePlugins: {}, plugins: [], From d7732c70fc219c650e7be98937bf0dd043689be7 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 24 Jul 2020 12:15:28 -0400 Subject: [PATCH 2/3] Replace cool new JS features with lodash because node 8/10 --- src/plugins/animation.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/plugins/animation.js b/src/plugins/animation.js index 49b9f7d26..50ad186d2 100644 --- a/src/plugins/animation.js +++ b/src/plugins/animation.js @@ -1,16 +1,18 @@ +import _ from 'lodash' + export default function() { return function({ addBase, addUtilities, e, theme, variants }) { const keyframesConfig = theme('keyframes') - const keyframesStyles = Object.fromEntries( - Object.entries(keyframesConfig).map(([name, keyframes]) => { + const keyframesStyles = _.fromPairs( + _.toPairs(keyframesConfig).map(([name, keyframes]) => { return [`@keyframes ${name}`, keyframes] }) ) addBase(keyframesStyles) const animationConfig = theme('animation') - const utilities = Object.fromEntries( - Object.entries(animationConfig).map(([suffix, animation]) => { + const utilities = _.fromPairs( + _.toPairs(animationConfig).map(([suffix, animation]) => { return [ `.${e(`animate-${suffix}`)}`, { From bb1519a7c03335d7a201293d12ab6a9e53388874 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 24 Jul 2020 14:27:12 -0400 Subject: [PATCH 3/3] Rename fade to pulse --- __tests__/fixtures/tailwind-output-ie11.css | 22 +++++++++---------- .../fixtures/tailwind-output-important.css | 22 +++++++++---------- .../tailwind-output-no-color-opacity.css | 22 +++++++++---------- __tests__/fixtures/tailwind-output.css | 22 +++++++++---------- stubs/defaultConfig.stub.js | 4 ++-- 5 files changed, 46 insertions(+), 46 deletions(-) diff --git a/__tests__/fixtures/tailwind-output-ie11.css b/__tests__/fixtures/tailwind-output-ie11.css index c12278570..7e06186a7 100644 --- a/__tests__/fixtures/tailwind-output-ie11.css +++ b/__tests__/fixtures/tailwind-output-ie11.css @@ -599,7 +599,7 @@ video { } } -@keyframes fade { +@keyframes pulse { 0%, 100% { opacity: 1; } @@ -11006,8 +11006,8 @@ video { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; } -.animate-fade { - animation: fade 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; +.animate-pulse { + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .animate-bounce { @@ -21405,8 +21405,8 @@ video { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; } - .sm\:animate-fade { - animation: fade 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; + .sm\:animate-pulse { + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .sm\:animate-bounce { @@ -31805,8 +31805,8 @@ video { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; } - .md\:animate-fade { - animation: fade 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; + .md\:animate-pulse { + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .md\:animate-bounce { @@ -42205,8 +42205,8 @@ video { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; } - .lg\:animate-fade { - animation: fade 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; + .lg\:animate-pulse { + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .lg\:animate-bounce { @@ -52605,8 +52605,8 @@ video { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; } - .xl\:animate-fade { - animation: fade 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; + .xl\:animate-pulse { + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .xl\:animate-bounce { diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css index 00d675299..c8c61c633 100644 --- a/__tests__/fixtures/tailwind-output-important.css +++ b/__tests__/fixtures/tailwind-output-important.css @@ -599,7 +599,7 @@ video { } } -@keyframes fade { +@keyframes pulse { 0%, 100% { opacity: 1; } @@ -14392,8 +14392,8 @@ video { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite !important; } -.animate-fade { - animation: fade 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important; +.animate-pulse { + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important; } .animate-bounce { @@ -28177,8 +28177,8 @@ video { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite !important; } - .sm\:animate-fade { - animation: fade 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important; + .sm\:animate-pulse { + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important; } .sm\:animate-bounce { @@ -41963,8 +41963,8 @@ video { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite !important; } - .md\:animate-fade { - animation: fade 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important; + .md\:animate-pulse { + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important; } .md\:animate-bounce { @@ -55749,8 +55749,8 @@ video { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite !important; } - .lg\:animate-fade { - animation: fade 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important; + .lg\:animate-pulse { + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important; } .lg\:animate-bounce { @@ -69535,8 +69535,8 @@ video { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite !important; } - .xl\:animate-fade { - animation: fade 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important; + .xl\:animate-pulse { + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important; } .xl\:animate-bounce { diff --git a/__tests__/fixtures/tailwind-output-no-color-opacity.css b/__tests__/fixtures/tailwind-output-no-color-opacity.css index f0960cb8c..14ab13e58 100644 --- a/__tests__/fixtures/tailwind-output-no-color-opacity.css +++ b/__tests__/fixtures/tailwind-output-no-color-opacity.css @@ -599,7 +599,7 @@ video { } } -@keyframes fade { +@keyframes pulse { 0%, 100% { opacity: 1; } @@ -11944,8 +11944,8 @@ video { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; } -.animate-fade { - animation: fade 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; +.animate-pulse { + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .animate-bounce { @@ -23281,8 +23281,8 @@ video { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; } - .sm\:animate-fade { - animation: fade 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; + .sm\:animate-pulse { + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .sm\:animate-bounce { @@ -34619,8 +34619,8 @@ video { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; } - .md\:animate-fade { - animation: fade 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; + .md\:animate-pulse { + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .md\:animate-bounce { @@ -45957,8 +45957,8 @@ video { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; } - .lg\:animate-fade { - animation: fade 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; + .lg\:animate-pulse { + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .lg\:animate-bounce { @@ -57295,8 +57295,8 @@ video { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; } - .xl\:animate-fade { - animation: fade 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; + .xl\:animate-pulse { + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .xl\:animate-bounce { diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index 6d9ec00c9..064db9040 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -599,7 +599,7 @@ video { } } -@keyframes fade { +@keyframes pulse { 0%, 100% { opacity: 1; } @@ -14392,8 +14392,8 @@ video { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; } -.animate-fade { - animation: fade 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; +.animate-pulse { + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .animate-bounce { @@ -28177,8 +28177,8 @@ video { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; } - .sm\:animate-fade { - animation: fade 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; + .sm\:animate-pulse { + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .sm\:animate-bounce { @@ -41963,8 +41963,8 @@ video { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; } - .md\:animate-fade { - animation: fade 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; + .md\:animate-pulse { + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .md\:animate-bounce { @@ -55749,8 +55749,8 @@ video { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; } - .lg\:animate-fade { - animation: fade 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; + .lg\:animate-pulse { + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .lg\:animate-bounce { @@ -69535,8 +69535,8 @@ video { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; } - .xl\:animate-fade { - animation: fade 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; + .xl\:animate-pulse { + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .xl\:animate-bounce { diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index d08b5cbd5..f75f95f3f 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -626,7 +626,7 @@ module.exports = { none: 'none', spin: 'spin 1s linear infinite', ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite', - fade: 'fade 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', + pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', bounce: 'bounce 1s infinite', }, keyframes: { @@ -638,7 +638,7 @@ module.exports = { '0%': { transform: 'scale(1)', opacity: '1' }, '75%, 100%': { transform: 'scale(2)', opacity: '0' }, }, - fade: { + pulse: { '0%, 100%': { opacity: '1' }, '50%': { opacity: '.5' }, },