From 572791340fcc7b0f66e519fcbb7d4be9b998e088 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?L=C3=A9o=20Pradel?= <pradel.leo@gmail.com>
Date: Sun, 15 Nov 2020 13:39:36 +0100
Subject: [PATCH] fix!: fix rendering issues in Safari, Firefox by changing the
 structure

---
 .../__tests__/index.test.tsx                  |  30 ++---
 react-responsive-modal/src/CloseIcon.tsx      |   6 +-
 react-responsive-modal/src/index.tsx          | 123 +++++++++++-------
 react-responsive-modal/styles.css             |  76 ++++++++---
 website/src/docs/index.mdx                    |  48 +++----
 website/src/examples/CustomAnimation.tsx      |   8 +-
 website/src/examples/custom-animation.css     |  22 +++-
 7 files changed, 201 insertions(+), 112 deletions(-)

diff --git a/react-responsive-modal/__tests__/index.test.tsx b/react-responsive-modal/__tests__/index.test.tsx
index 27aececc..a989dd10 100644
--- a/react-responsive-modal/__tests__/index.test.tsx
+++ b/react-responsive-modal/__tests__/index.test.tsx
@@ -12,7 +12,7 @@ describe('modal', () => {
         </Modal>
       );
 
-      fireEvent.click(getByTestId('overlay'));
+      fireEvent.click(getByTestId('modal-container'));
       expect(onClose).toHaveBeenCalledTimes(1);
     });
 
@@ -24,7 +24,7 @@ describe('modal', () => {
         </Modal>
       );
 
-      fireEvent.click(getByTestId('overlay'));
+      fireEvent.click(getByTestId('modal-container'));
       expect(onClose).not.toHaveBeenCalled();
     });
 
@@ -147,7 +147,7 @@ describe('modal', () => {
         </Modal>
       );
       // Simulate the browser animation end
-      fireEvent.animationEnd(getByTestId('overlay'));
+      fireEvent.animationEnd(getByTestId('modal'));
       await waitFor(
         () => {
           expect(queryByTestId('modal')).not.toBeInTheDocument();
@@ -195,7 +195,7 @@ describe('modal', () => {
         </React.Fragment>
       );
 
-      fireEvent.animationEnd(getAllByTestId('overlay')[1]);
+      fireEvent.animationEnd(getAllByTestId('modal')[1]);
       await waitFor(
         () => {
           expect(queryByText(/second modal/)).not.toBeInTheDocument();
@@ -216,7 +216,7 @@ describe('modal', () => {
         </React.Fragment>
       );
 
-      fireEvent.animationEnd(getAllByTestId('overlay')[0]);
+      fireEvent.animationEnd(getAllByTestId('modal')[0]);
       await waitFor(
         () => {
           expect(queryByText(/first modal/)).not.toBeInTheDocument();
@@ -251,7 +251,7 @@ describe('modal', () => {
         </React.Fragment>
       );
 
-      fireEvent.animationEnd(getAllByTestId('overlay')[1]);
+      fireEvent.animationEnd(getAllByTestId('modal')[1]);
       await waitFor(
         () => {
           expect(queryByText(/second modal/)).not.toBeInTheDocument();
@@ -344,7 +344,7 @@ describe('modal', () => {
           <div>modal content</div>
         </Modal>
       );
-      fireEvent.animationEnd(getByTestId('overlay'));
+      fireEvent.animationEnd(getByTestId('modal'));
       expect(queryByTestId('modal')).toBeNull();
     });
   });
@@ -357,10 +357,10 @@ describe('modal', () => {
         </Modal>
       );
 
-      expect(getByTestId('modal').classList.length).toBe(1);
+      expect(getByTestId('modal-container').classList.length).toBe(1);
       expect(
-        getByTestId('modal').classList.contains(
-          'react-responsive-modal-modalCenter'
+        getByTestId('modal-container').classList.contains(
+          'react-responsive-modal-containerCenter'
         )
       ).toBeFalsy();
     });
@@ -372,10 +372,10 @@ describe('modal', () => {
         </Modal>
       );
 
-      expect(getByTestId('modal').classList.length).toBe(2);
+      expect(getByTestId('modal-container').classList.length).toBe(2);
       expect(
-        getByTestId('modal').classList.contains(
-          'react-responsive-modal-modalCenter'
+        getByTestId('modal-container').classList.contains(
+          'react-responsive-modal-containerCenter'
         )
       ).toBeTruthy();
     });
@@ -464,7 +464,7 @@ describe('modal', () => {
         </Modal>
       );
 
-      fireEvent.click(getByTestId('overlay'));
+      fireEvent.click(getByTestId('modal-container'));
       expect(onOverlayClick).toHaveBeenCalledTimes(1);
     });
   });
@@ -478,7 +478,7 @@ describe('modal', () => {
         </Modal>
       );
 
-      fireEvent.animationEnd(getByTestId('overlay'));
+      fireEvent.animationEnd(getByTestId('modal'));
       expect(onAnimationEnd).toHaveBeenCalledTimes(1);
     });
   });
diff --git a/react-responsive-modal/src/CloseIcon.tsx b/react-responsive-modal/src/CloseIcon.tsx
index e6bf000f..0b4ecde9 100644
--- a/react-responsive-modal/src/CloseIcon.tsx
+++ b/react-responsive-modal/src/CloseIcon.tsx
@@ -15,7 +15,7 @@ interface CloseIconProps {
   classes: {
     closeButton?: string;
   };
-  onClickCloseIcon: () => void;
+  onClick: () => void;
 }
 
 const CloseIcon = ({
@@ -24,13 +24,13 @@ const CloseIcon = ({
   styles,
   id,
   closeIcon,
-  onClickCloseIcon,
+  onClick,
 }: CloseIconProps) => (
   <button
     id={id}
     className={cx(classes.closeButton, classNames?.closeButton)}
     style={styles?.closeButton}
-    onClick={onClickCloseIcon}
+    onClick={onClick}
     data-testid="close-button"
   >
     {closeIcon ? (
diff --git a/react-responsive-modal/src/index.tsx b/react-responsive-modal/src/index.tsx
index b8b03f50..0469fc67 100644
--- a/react-responsive-modal/src/index.tsx
+++ b/react-responsive-modal/src/index.tsx
@@ -7,12 +7,16 @@ import { modalManager, useModalManager } from './modalManager';
 import { isBrowser, blockNoScroll, unblockNoScroll } from './utils';
 
 const classes = {
+  root: 'react-responsive-modal-root',
   overlay: 'react-responsive-modal-overlay',
+  overlayAnimationIn: 'react-responsive-modal-overlay-in',
+  overlayAnimationOut: 'react-responsive-modal-overlay-out',
+  modalContainer: 'react-responsive-modal-container',
+  modalContainerCenter: 'react-responsive-modal-containerCenter',
   modal: 'react-responsive-modal-modal',
-  modalCenter: 'react-responsive-modal-modalCenter',
+  modalAnimationIn: 'react-responsive-modal-modal-in',
+  modalAnimationOut: 'react-responsive-modal-modal-out',
   closeButton: 'react-responsive-modal-closeButton',
-  animationIn: 'react-responsive-modal-fadeIn',
-  animationOut: 'react-responsive-modal-fadeOut',
 };
 
 export interface ModalProps {
@@ -74,18 +78,24 @@ export interface ModalProps {
    * An object containing classNames to style the modal.
    */
   classNames?: {
+    root?: string;
     overlay?: string;
+    overlayAnimationIn?: string;
+    overlayAnimationOut?: string;
+    modalContainer?: string;
     modal?: string;
+    modalAnimationIn?: string;
+    modalAnimationOut?: string;
     closeButton?: string;
     closeIcon?: string;
-    animationIn?: string;
-    animationOut?: string;
   };
   /**
    * An object containing the styles objects to style the modal.
    */
   styles?: {
+    root?: React.CSSProperties;
     overlay?: React.CSSProperties;
+    modalContainer?: React.CSSProperties;
     modal?: React.CSSProperties;
     closeButton?: React.CSSProperties;
     closeIcon?: React.CSSProperties;
@@ -146,7 +156,7 @@ export const Modal = ({
   closeIconId,
   closeIcon,
   focusTrapped = true,
-  animationDuration = 500,
+  animationDuration = 300,
   classNames,
   styles,
   role = 'dialog',
@@ -179,6 +189,7 @@ export const Modal = ({
     if (blockScroll) {
       blockNoScroll();
     }
+
     if (
       refContainer.current &&
       !container &&
@@ -198,6 +209,7 @@ export const Modal = ({
     ) {
       unblockNoScroll();
     }
+
     if (
       refContainer.current &&
       !container &&
@@ -264,10 +276,6 @@ export const Modal = ({
     refShouldClose.current = false;
   };
 
-  const handleClickCloseIcon = () => {
-    onClose();
-  };
-
   const handleAnimationEnd = () => {
     if (!open) {
       setShowPortal(false);
@@ -278,52 +286,71 @@ export const Modal = ({
 
   const containerModal = container || refContainer.current;
 
+  const overlayAnimation = open
+    ? classNames?.overlayAnimationIn ?? classes.overlayAnimationIn
+    : classNames?.overlayAnimationOut ?? classes.overlayAnimationOut;
+
+  const modalAnimation = open
+    ? classNames?.modalAnimationIn ?? classes.modalAnimationIn
+    : classNames?.modalAnimationOut ?? classes.modalAnimationOut;
+
   return showPortal && containerModal
     ? ReactDom.createPortal(
         <div
-          style={{
-            animation: `${
-              open
-                ? classNames?.animationIn ?? classes.animationIn
-                : classNames?.animationOut ?? classes.animationOut
-            } ${animationDuration}ms`,
-            ...styles?.overlay,
-          }}
-          className={cx(classes.overlay, classNames?.overlay)}
-          onClick={handleClickOverlay}
-          onAnimationEnd={handleAnimationEnd}
-          data-testid="overlay"
+          className={cx(classes.root, classNames?.root)}
+          style={styles?.root}
+          data-testid="root"
         >
           <div
-            ref={refModal}
+            className={cx(classes.overlay, classNames?.overlay)}
+            data-testid="overlay"
+            aria-hidden={true}
+            style={{
+              animation: `${overlayAnimation} ${animationDuration}ms`,
+              ...styles?.overlay,
+            }}
+          />
+          <div
             className={cx(
-              classes.modal,
-              center && classes.modalCenter,
-              classNames?.modal
+              classes.modalContainer,
+              center && classes.modalContainerCenter,
+              classNames?.modalContainer
             )}
-            style={styles?.modal}
-            onMouseDown={handleModalEvent}
-            onMouseUp={handleModalEvent}
-            onClick={handleModalEvent}
-            id={modalId}
-            role={role}
-            aria-modal="true"
-            aria-labelledby={ariaLabelledby}
-            aria-describedby={ariaDescribedby}
-            data-testid="modal"
+            style={styles?.modalContainer}
+            data-testid="modal-container"
+            onClick={handleClickOverlay}
           >
-            {focusTrapped && <FocusTrap container={refModal} />}
-            {children}
-            {showCloseIcon && (
-              <CloseIcon
-                classes={classes}
-                classNames={classNames}
-                styles={styles}
-                closeIcon={closeIcon}
-                onClickCloseIcon={handleClickCloseIcon}
-                id={closeIconId}
-              />
-            )}
+            <div
+              ref={refModal}
+              className={cx(classes.modal, classNames?.modal)}
+              style={{
+                animation: `${modalAnimation} ${animationDuration}ms`,
+                ...styles?.modal,
+              }}
+              onMouseDown={handleModalEvent}
+              onMouseUp={handleModalEvent}
+              onClick={handleModalEvent}
+              onAnimationEnd={handleAnimationEnd}
+              id={modalId}
+              role={role}
+              aria-modal="true"
+              aria-labelledby={ariaLabelledby}
+              aria-describedby={ariaDescribedby}
+              data-testid="modal"
+            >
+              {focusTrapped && <FocusTrap container={refModal} />}
+              {children}
+              {showCloseIcon && (
+                <CloseIcon
+                  classes={classes}
+                  classNames={classNames}
+                  styles={styles}
+                  closeIcon={closeIcon}
+                  onClick={onClose}
+                  id={closeIconId}
+                />
+              )}
+            </div>
           </div>
         </div>,
         containerModal
diff --git a/react-responsive-modal/styles.css b/react-responsive-modal/styles.css
index 0f42b641..69b6f70c 100644
--- a/react-responsive-modal/styles.css
+++ b/react-responsive-modal/styles.css
@@ -1,30 +1,50 @@
-.react-responsive-modal-overlay {
-  background: rgba(0, 0, 0, 0.75);
-  display: flex;
-  align-items: flex-start;
+.react-responsive-modal-root {
   position: fixed;
   top: 0;
+  bottom: 0;
   left: 0;
   right: 0;
+  z-index: 1000;
+}
+
+.react-responsive-modal-overlay {
+  background: rgba(0, 0, 0, 0.5);
+  position: fixed;
+  top: 0;
   bottom: 0;
-  overflow-y: auto;
+  left: 0;
+  right: 0;
+  z-index: -1;
+}
+
+.react-responsive-modal-container {
+  height: 100%;
+  outline: 0;
   overflow-x: hidden;
-  z-index: 1000;
-  padding: 1.2rem;
+  overflow-y: auto;
+  text-align: center;
+}
+
+/* Used to trick the browser to center the modal content properly  */
+.react-responsive-modal-containerCenter:after {
+  width: 0;
+  height: 100%;
+  content: '';
+  display: inline-block;
+  vertical-align: middle;
 }
 
 .react-responsive-modal-modal {
   max-width: 800px;
-  position: relative;
-  padding: 1.2rem;
+  display: inline-block;
+  text-align: left;
+  vertical-align: middle;
   background: #ffffff;
-  background-clip: padding-box;
   box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.25);
-  margin: 0 auto;
-}
-
-.react-responsive-modal-modalCenter {
-  margin: auto;
+  margin: 1.2rem;
+  padding: 1.2rem;
+  position: relative;
+  overflow-y: auto;
 }
 
 .react-responsive-modal-closeButton {
@@ -38,20 +58,42 @@
   display: flex;
 }
 
-@keyframes react-responsive-modal-fadeIn {
+@keyframes react-responsive-modal-overlay-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes react-responsive-modal-overlay-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes react-responsive-modal-modal-in {
   0% {
+    transform: scale(0.96);
     opacity: 0;
   }
   100% {
+    transform: scale(100%);
     opacity: 1;
   }
 }
 
-@keyframes react-responsive-modal-fadeOut {
+@keyframes react-responsive-modal-modal-out {
   0% {
+    transform: scale(100%);
     opacity: 1;
   }
   100% {
+    transform: scale(0.96);
     opacity: 0;
   }
 }
diff --git a/website/src/docs/index.mdx b/website/src/docs/index.mdx
index f93cdd32..0b683ba3 100644
--- a/website/src/docs/index.mdx
+++ b/website/src/docs/index.mdx
@@ -105,7 +105,7 @@ Customising the Modal style via css is really easy. For example if you add the f
 
 ### Custom animation
 
-If you want to change the default animation, you can do so by creating your own css animation. For example if you add the following css to your app you will get the following result:
+If you want to change the default animation, you can do so by creating your own css animation. The modal and the overlay can be animated separately. For example if you add the following css to your app you will get the following result:
 
 ```css file=../examples/custom-animation.css
 
@@ -165,29 +165,29 @@ By default, the Modal will be rendered at the end of the html body tag. If you w
 
 ## Props
 
-| Name                    | Type                                                                                                                           | Default  | Description                                                                                                                                                                                                        |
-| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| **open\***              | `boolean`                                                                                                                      |          | Control if the modal is open or not.                                                                                                                                                                               |
-| **center**              | `boolean`                                                                                                                      | false    | Should the dialog be centered.                                                                                                                                                                                     |
-| **closeOnEsc**          | `boolean`                                                                                                                      | true     | Is the modal closable when user press esc key.                                                                                                                                                                     |
-| **closeOnOverlayClick** | `boolean`                                                                                                                      | true     | Is the modal closable when user click on overlay.                                                                                                                                                                  |
-| **blockScroll**         | `boolean`                                                                                                                      | true     | Whether to block scrolling when dialog is open.                                                                                                                                                                    |
-| **showCloseIcon**       | `boolean`                                                                                                                      | true     | Show the close icon.                                                                                                                                                                                               |
-| **closeIconId**         | `string`                                                                                                                       |          | id attribute for the close icon button.                                                                                                                                                                            |
-| **closeIcon**           | `React.ReactNode`                                                                                                              |          | Custom icon to render (svg, img, etc...).                                                                                                                                                                          |
-| **focusTrapped**        | `boolean`                                                                                                                      | true     | When the modal is open, trap focus within it.                                                                                                                                                                      |
-| **container**           | `Element`                                                                                                                      |          | You can specify a container prop which should be of type `Element`. The portal will be rendered inside that element. The default behavior will create a div node and render it at the at the end of document.body. |
-| **classNames**          | `{ overlay?: string; modal?: string; closeButton?: string; closeIcon?: string; animationIn?: string; animationOut?: string; }` |          | An object containing classNames to style the modal.                                                                                                                                                                |
-| **styles**              | `{ overlay?: string; modal?: string; closeButton?: string; closeIcon?: string; }`                                              |          | An object containing the styles objects to style the modal.                                                                                                                                                        |
-| **animationDuration**   | `number`                                                                                                                       | 500      | Animation duration in milliseconds.                                                                                                                                                                                |
-| **role**                | `string`                                                                                                                       | "dialog" | ARIA role for modal                                                                                                                                                                                                |
-| **ariaLabelledby**      | `string`                                                                                                                       |          | ARIA label for modal                                                                                                                                                                                               |
-| **ariaDescribedby**     | `string`                                                                                                                       |          | ARIA description for modal                                                                                                                                                                                         |
-| **modalId**             | `string`                                                                                                                       |          | id attribute for modal                                                                                                                                                                                             |
-| **onClose\***           | `() => void`                                                                                                                   |          | Callback fired when the Modal is requested to be closed by a click on the overlay or when user press esc key.                                                                                                      |
-| **onEscKeyDown\***      | `(event: KeyboardEvent) => void`                                                                                               |          | Callback fired when the escape key is pressed.                                                                                                                                                                     |
-| **onOverlayClick\***    | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void`                                                                |          | Callback fired when the overlay is clicked.                                                                                                                                                                        |
-| **onAnimationEnd\***    | `() => void`                                                                                                                   |          | Callback fired when the Modal has exited and the animation is finished.                                                                                                                                            |
+| Name                    | Type                                                                                                                                                                                                                                   | Default  | Description                                                                                                                                                                                                        |
+| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **open\***              | `boolean`                                                                                                                                                                                                                              |          | Control if the modal is open or not.                                                                                                                                                                               |
+| **center**              | `boolean`                                                                                                                                                                                                                              | false    | Should the dialog be centered.                                                                                                                                                                                     |
+| **closeOnEsc**          | `boolean`                                                                                                                                                                                                                              | true     | Is the modal closable when user press esc key.                                                                                                                                                                     |
+| **closeOnOverlayClick** | `boolean`                                                                                                                                                                                                                              | true     | Is the modal closable when user click on overlay.                                                                                                                                                                  |
+| **blockScroll**         | `boolean`                                                                                                                                                                                                                              | true     | Whether to block scrolling when dialog is open.                                                                                                                                                                    |
+| **showCloseIcon**       | `boolean`                                                                                                                                                                                                                              | true     | Show the close icon.                                                                                                                                                                                               |
+| **closeIconId**         | `string`                                                                                                                                                                                                                               |          | id attribute for the close icon button.                                                                                                                                                                            |
+| **closeIcon**           | `React.ReactNode`                                                                                                                                                                                                                      |          | Custom icon to render (svg, img, etc...).                                                                                                                                                                          |
+| **focusTrapped**        | `boolean`                                                                                                                                                                                                                              | true     | When the modal is open, trap focus within it.                                                                                                                                                                      |
+| **container**           | `Element`                                                                                                                                                                                                                              |          | You can specify a container prop which should be of type `Element`. The portal will be rendered inside that element. The default behavior will create a div node and render it at the at the end of document.body. |
+| **classNames**          | `{ root?: string; overlay?: string; overlayAnimationIn?: string; overlayAnimationOut?: string; modal?: string; modalAnimationIn?: string; modalAnimationOut?: string; closeButton?: string; closeIcon?: string; }`                     |          | An object containing classNames to style the modal.                                                                                                                                                                |
+| **styles**              | `{ root?: React.CSSProperties; overlay?: React.CSSProperties; overlay?: React.CSSProperties; modalContainer?: React.CSSProperties; modal?: React.CSSProperties; closeButton?: React.CSSProperties; closeIcon?: React.CSSProperties; }` |          | An object containing the styles objects to style the modal.                                                                                                                                                        |
+| **animationDuration**   | `number`                                                                                                                                                                                                                               | 300      | Animation duration in milliseconds.                                                                                                                                                                                |
+| **role**                | `string`                                                                                                                                                                                                                               | "dialog" | ARIA role for modal                                                                                                                                                                                                |
+| **ariaLabelledby**      | `string`                                                                                                                                                                                                                               |          | ARIA label for modal                                                                                                                                                                                               |
+| **ariaDescribedby**     | `string`                                                                                                                                                                                                                               |          | ARIA description for modal                                                                                                                                                                                         |
+| **modalId**             | `string`                                                                                                                                                                                                                               |          | id attribute for modal                                                                                                                                                                                             |
+| **onClose\***           | `() => void`                                                                                                                                                                                                                           |          | Callback fired when the Modal is requested to be closed by a click on the overlay or when user press esc key.                                                                                                      |
+| **onEscKeyDown\***      | `(event: KeyboardEvent) => void`                                                                                                                                                                                                       |          | Callback fired when the escape key is pressed.                                                                                                                                                                     |
+| **onOverlayClick\***    | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void`                                                                                                                                                                        |          | Callback fired when the overlay is clicked.                                                                                                                                                                        |
+| **onAnimationEnd\***    | `() => void`                                                                                                                                                                                                                           |          | Callback fired when the Modal has exited and the animation is finished.                                                                                                                                            |
 
 ## License
 
diff --git a/website/src/examples/CustomAnimation.tsx b/website/src/examples/CustomAnimation.tsx
index 218ea209..99f11ae1 100644
--- a/website/src/examples/CustomAnimation.tsx
+++ b/website/src/examples/CustomAnimation.tsx
@@ -16,10 +16,12 @@ const App = () => {
         onClose={() => setOpen(false)}
         center
         classNames={{
-          animationIn: 'customEnterAnimation',
-          animationOut: 'customLeaveAnimation',
+          overlayAnimationIn: 'customEnterOverlayAnimation',
+          overlayAnimationOut: 'customLeaveOverlayAnimation',
+          modalAnimationIn: 'customEnterModalAnimation',
+          modalAnimationOut: 'customLeaveModalAnimation',
         }}
-        animationDuration={1000}
+        animationDuration={800}
       >
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
diff --git a/website/src/examples/custom-animation.css b/website/src/examples/custom-animation.css
index 0c116690..1ac8d210 100644
--- a/website/src/examples/custom-animation.css
+++ b/website/src/examples/custom-animation.css
@@ -1,5 +1,6 @@
 /* examples/custom-animation.css */
-@keyframes customEnterAnimation {
+
+@keyframes customEnterOverlayAnimation {
   0% {
     transform: scale(0);
   }
@@ -7,7 +8,7 @@
     transform: scale(1);
   }
 }
-@keyframes customLeaveAnimation {
+@keyframes customLeaveOverlayAnimation {
   0% {
     transform: scale(1);
   }
@@ -15,3 +16,20 @@
     transform: scale(0);
   }
 }
+
+@keyframes customEnterModalAnimation {
+  0% {
+    transform: scale(0.2);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes customLeaveModalAnimation {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0.2);
+  }
+}