feat(tailwind-plugins): added base missing keyframe animations

adevinta · Aug 25, 2023 · fcfaf65 · fcfaf65
1 parent 342255f
commit fcfaf65
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 12 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/utils/tailwind-plugins/animations/index.js b/packages/utils/tailwind-plugins/animations/index.js
@@ -121,21 +121,47 @@ module.exports = plugin.withOptions(
     theme: {
       extend: {
         keyframes: {
-          slideTop: {
+          fadeIn: {
+            '0%': { opacity: 0 },
+            '100%': { opacity: 1 },
+          },
+          fadeOut: {
+            '0%': { opacity: 1 },
+            '100%': { opacity: 0 },
+          },
+          // slideIn
+          slideInTop: {
+            '0%': { transform: 'translateY(-100%)' },
+            '100%': { transform: 'translateY(0)' },
+          },
+          slideInRight: {
+            '0%': { transform: 'translateX(100%)' },
+            '100%': { transform: 'translateX(0)' },
+          },
+          slideInBottom: {
+            '0%': { transform: 'translateY(100%)' },
+            '100%': { transform: 'translateY(0)' },
+          },
+          slideInLeft: {
+            '0%': { transform: 'translateX(-100%)' },
+            '100%': { transform: 'translateX(0)' },
+          },
+          // slideOut
+          slideOutTop: {
             '0%': { transform: 'translateY(0)' },
-            '100%': { transform: 'translateY(-100px)' },
+            '100%': { transform: 'translateY(-100%)' },
           },
-          slideRight: {
+          slideOutRight: {
             '0%': { transform: 'translateX(0)' },
-            '100%': { transform: 'translateX(100px)' },
+            '100%': { transform: 'translateX(100%)' },
           },
-          slideBottom: {
+          slideOutBottom: {
             '0%': { transform: 'translateY(0)' },
-            '100%': { transform: 'translateY(100px)' },
+            '100%': { transform: 'translateY(100%)' },
           },
-          slideLeft: {
+          slideOutLeft: {
             '0%': { transform: 'translateX(0)' },
-            '100%': { transform: 'translateX(-100px)' },
+            '100%': { transform: 'translateX(-100%)' },
           },
           standaloneIndeterminateBar: {
             '0%': {
@@ -147,10 +173,18 @@ module.exports = plugin.withOptions(
           },
         },
         animation: {
-          'slide-top': 'slideTop 0.5s ease-in-out',
-          'slide-right': 'slideRight 0.5s ease-in-out',
-          'slide-bottom': 'slideBottom 0.5s ease-in-out',
-          'slide-left': 'slideLeft 0.5s ease-in-out',
+          'fade-in': 'fadeIn 0.25s cubic-bezier(0.2, 0, 0, 1)',
+          'fade-out': 'fadeOut 0.25s cubic-bezier(0.2, 0, 0, 1)',
+          // slideIn
+          'slide-in-top': 'slideInTop 0.4s cubic-bezier(0.05, 0.7, 0.1, 1)',
+          'slide-in-right': 'slideInRight 0.4s cubic-bezier(0.05, 0.7, 0.1, 1)',
+          'slide-in-bottom': 'slideInBottom 0.4s cubic-bezier(0.05, 0.7, 0.1, 1)',
+          'slide-in-left': 'slideInLeft 0.4s cubic-bezier(0.05, 0.7, 0.1, 1)',
+          // slideOut
+          'slide-out-top': 'slideOutTop 0.4s cubic-bezier(0.05, 0.7, 0.1, 1)',
+          'slide-out-right': 'slideOutRight 0.4s cubic-bezier(0.05, 0.7, 0.1, 1)',
+          'slide-out-bottom': 'slideOutBottom 0.4s cubic-bezier(0.05, 0.7, 0.1, 1)',
+          'slide-out-left': 'slideOutLeft 0.4s cubic-bezier(0.05, 0.7, 0.1, 1)',
           'standalone-indeterminate-bar':
             'standaloneIndeterminateBar 1.5s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite normal none running',
         },