// #region Imports
import { EaseOut } from '../AnimationEasings';
import { animation } from '../animation';
// #endregion
/**
 * A fade in animation.
 */
const fadeIn = animation([
    { opacity: 0 },
    { opacity: 1 }
], {
    duration: 200,
    easing: EaseOut.Sine,
    fill: 'forwards'
});
/**
 * A fade out animation.
 */
const fadeOut = animation([
    { opacity: 1 },
    { opacity: 0 }
], {
    duration: 200,
    easing: EaseOut.Sine,
    fill: 'forwards'
});
/**
 * A fade and slide in animation from bottom to top.
 */
const fadeSlideInTop = animation([
    {
        opacity: 0,
        transform: 'translateY(16px)'
    },
    {
        opacity: 1,
        transform: 'translateY(0)'
    }
], {
    duration: 200,
    easing: EaseOut.Sine,
    fill: 'forwards'
});
/**
 * A fade and slide in animation from top to bottom.
 */
const fadeSlideInBottom = animation([
    {
        opacity: 0,
        transform: 'translateY(-16px)'
    },
    {
        opacity: 1,
        transform: 'translateY(0)'
    }
], {
    duration: 200,
    easing: EaseOut.Sine,
    fill: 'forwards'
});
/**
 * A fade and slide out animation from bottom to top.
 */
const fadeSlideInLeft = animation([
    {
        opacity: 0,
        transform: 'translateX(16px)'
    },
    {
        opacity: 1,
        transform: 'translateX(0)'
    }
], {
    duration: 200,
    easing: EaseOut.Sine,
    fill: 'forwards'
});
/**
 * A fade and slide out animation from top to bottom.
 */
const fadeSlideInRight = animation([
    {
        opacity: 0,
        transform: 'translateX(-16px)'
    },
    {
        opacity: 1,
        transform: 'translateX(0)'
    }
], {
    duration: 200,
    easing: EaseOut.Sine,
    fill: 'forwards'
});
/**
 * A fade and slide out animation from top to bottom.
 */
const fadeSlideOutTop = animation([
    {
        opacity: 1,
        transform: 'translateY(0)'
    },
    {
        opacity: 0,
        transform: 'translateY(16px)'
    }
], {
    duration: 200,
    easing: EaseOut.Sine,
    fill: 'forwards'
});
/**
 * A fade and slide out animation from top to bottom.
 */
const fadeSlideOutBottom = animation([
    {
        opacity: 1,
        transform: 'translateY(0)'
    },
    {
        opacity: 0,
        transform: 'translateY(-16px)'
    }
], {
    duration: 200,
    easing: EaseOut.Sine,
    fill: 'forwards'
});
/**
 * A fade and slide out animation from top to bottom.
 */
const fadeSlideOutLeft = animation([
    {
        opacity: 1,
        transform: 'translateX(0)'
    },
    {
        opacity: 0,
        transform: 'translateX(16px)'
    }
], {
    duration: 200,
    easing: EaseOut.Sine,
    fill: 'forwards'
});
/**
 * A fade and slide out animation from top to bottom.
 */
const fadeSlideOutRight = animation([
    {
        opacity: 1,
        transform: 'translateX(0)'
    },
    {
        opacity: 0,
        transform: 'translateX(-16px)'
    }
], {
    duration: 200,
    easing: EaseOut.Sine,
    fill: 'forwards'
});
export { fadeIn, fadeOut, 
// Aliases for backward compatibility
fadeSlideInTop as fadeSlideIn, fadeSlideInBottom, fadeSlideInLeft, fadeSlideInRight, fadeSlideInTop, fadeSlideOutTop as fadeSlideOut, fadeSlideOutBottom, fadeSlideOutLeft, fadeSlideOutRight, fadeSlideOutTop };
//# sourceMappingURL=Fade.js.map