diff --git a/__tests__/fixtures/tailwind-output-ie11.css b/__tests__/fixtures/tailwind-output-ie11.css index 7e06186a7..6690bfbc7 100644 --- a/__tests__/fixtures/tailwind-output-ie11.css +++ b/__tests__/fixtures/tailwind-output-ie11.css @@ -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; } diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css index aa8399c3b..80abbd570 100644 --- a/__tests__/fixtures/tailwind-output-important.css +++ b/__tests__/fixtures/tailwind-output-important.css @@ -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; } diff --git a/__tests__/fixtures/tailwind-output-no-color-opacity.css b/__tests__/fixtures/tailwind-output-no-color-opacity.css index c3a640132..0d481f196 100644 --- a/__tests__/fixtures/tailwind-output-no-color-opacity.css +++ b/__tests__/fixtures/tailwind-output-no-color-opacity.css @@ -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; } diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index 6251b6d39..72d1eb126 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -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; } diff --git a/src/plugins/animation.js b/src/plugins/animation.js index 50ad186d2..75c7075a7 100644 --- a/src/plugins/animation.js +++ b/src/plugins/animation.js @@ -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(