// #region Imports
import { EaseInOut } from '../AnimationEasings';
// #endregion
export const Animation = {
    // #region Fade
    fadeIn: {
        from: { opacity: 0 },
        to: { opacity: 1 },
        options: {
            delay: 0,
            duration: 1000,
            easing: EaseInOut.Quad
        }
    },
    fadeOut: {
        from: { opacity: 1 },
        to: { opacity: 0 },
        options: {
            delay: 0,
            duration: 1000,
            easing: EaseInOut.Quad
        }
    },
    fadeSlideIn: {
        from: {
            opacity: 0,
            transform: 'translateY(16px)'
        },
        to: {
            opacity: 1,
            transform: 'translateY(0)'
        },
        options: {
            delay: 0,
            duration: 1000,
            easing: EaseInOut.Quad
        }
    },
    fadeSlideOut: {
        from: {
            opacity: 1,
            transform: 'translateY(0)'
        },
        to: {
            opacity: 0,
            transform: 'translateY(16px)'
        },
        options: {
            delay: 0,
            duration: 1000,
            easing: EaseInOut.Quad
        }
    },
    // #endregion
    // #region Slide
    slideInTop: {
        from: {
            opacity: 0,
            transform: 'translateY(-16px)'
        },
        to: {
            opacity: 1,
            transform: 'translateY(0)'
        }
    },
    slideOutTop: {
        from: {
            opacity: 1,
            transform: 'translateY(0)'
        },
        to: {
            opacity: 0,
            transform: 'translateY(-16px)'
        }
    },
    slideInBottom: {
        from: {
            opacity: 0,
            transform: 'translateY(16px)'
        },
        to: {
            opacity: 1,
            transform: 'translateY(0)'
        }
    },
    slideOutBottom: {
        from: {
            opacity: 1,
            transform: 'translateY(0)'
        },
        to: {
            opacity: 0,
            transform: 'translateY(16px)'
        }
    },
    slideInLeft: {
        from: {
            opacity: 0,
            transform: 'translateX(-16px)'
        },
        to: {
            opacity: 1,
            transform: 'translateX(0)'
        }
    },
    slideOutLeft: {
        from: {
            opacity: 1,
            transform: 'translateX(0)'
        },
        to: {
            opacity: 0,
            transform: 'translateX(-16px)'
        }
    },
    slideInRight: {
        from: {
            opacity: 0,
            transform: 'translateX(16px)'
        },
        to: {
            opacity: 1,
            transform: 'translateX(0)'
        }
    },
    slideOutRight: {
        from: {
            opacity: 1,
            transform: 'translateX(0)'
        },
        to: {
            opacity: 0,
            transform: 'translateX(16px)'
        }
    },
    // #endregion
    // #region Flash
    flash: {
        from: {
            opacity: [0, 1, 0.75],
            offset: [0, 0.03, 0.6, 1]
        },
        to: {
            opacity: 0,
            offset: 0
        },
        options: {
            delay: 0,
            duration: 600,
            easing: 'ease-in',
            iterations: 1
        }
    },
    // #endregion
    // #region Grow
    growVerIn: {
        from: {
            opacity: 0,
            height: 0
        },
        to: {
            opacity: 1,
            height: 'auto'
        },
        options: {
            delay: 0,
            duration: 350,
            easing: EaseInOut.Quad
        }
    },
    growVerOut: {
        from: {
            opacity: 1,
            height: 'auto'
        },
        to: {
            opacity: 0,
            height: 0
        },
        options: {
            delay: 0,
            duration: 350,
            easing: EaseInOut.Quad
        }
    },
    growHorIn: {
        from: {
            opacity: 0,
            width: 0
        },
        to: {
            opacity: 1,
            width: 'auto'
        },
        options: {
            delay: 0,
            duration: 350,
            easing: EaseInOut.Quad
        }
    },
    growHorOut: {
        from: {
            opacity: 1,
            width: 'auto'
        },
        to: {
            opacity: 0,
            width: 0
        },
        options: {
            delay: 0,
            duration: 350,
            easing: EaseInOut.Quad
        }
    },
    // #endregion
    // #region Shake
    shakeHorizontal: {
        from: {
            offset: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9],
            transform: ['rotate(0deg) translateX(0)', 'rotate(0deg) translateX(-10px)', 'rotate(-0deg) translateX(10px)', 'rotate(0deg) translateX(-10px)', 'rotate(-0deg) translateX(10px)', 'rotate(0deg) translateX(-10px)', 'rotate(-0deg) translateX(10px)', 'rotate(0deg) translateX(-10px)', 'rotate(-0deg) translateX(8px)', 'rotate(0deg) translateX(-$8px)'],
            transformOrigin: 'center center'
        },
        to: {
            offset: 1,
            transform: 'rotate(0deg) translateX(0)',
            transformOrigin: 'center center'
        },
        options: {
            delay: 0,
            duration: 300,
            easing: EaseInOut.Quad,
            iterations: 3
        }
    },
    shakeVertical: {
        from: {
            offset: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9],
            transform: ['rotate(0deg) translateY(0)', 'rotate(0deg) translateY(-10px)', 'rotate(-0deg) translateY(10px)', 'rotate(0deg) translateY(-10px)', 'rotate(-0deg) translateY(10px)', 'rotate(0deg) translateY(-10px)', 'rotate(-0deg) translateY(10px)', 'rotate(0deg) translateY(-10px)', 'rotate(-0deg) translateY(8px)', 'rotate(0deg) translateY(-$8px)'],
            transformOrigin: 'center center'
        },
        to: {
            offset: 1,
            transform: 'rotate(0deg) translateY(0)',
            transformOrigin: 'center center'
        },
        options: {
            delay: 0,
            duration: 300,
            easing: EaseInOut.Quad,
            iterations: 3
        }
    },
    // #endregion
    // #region Rotate
    rotate: {
        from: { transform: 'rotate(0deg)' },
        to: { transform: 'rotate(360deg)' }
    }
    // #endregion
};
//# sourceMappingURL=Animation.js.map