@windicss/plugin-animations/animate/keyframes/fadeOut.js

Add Animate CSS as Windi CSS plugin to your project.

const keyframeFadeOut = {
    'from': {
        opacity: '1'
    },
    'to': {
        opacity: '0'
    },
};

const keyframeFadeOutDown = {
    'from': {
        opacity: '1'
    },
    'to': {
        opacity: '0',
        transform: 'translate3d(0, 100%, 0)'
    },
};

const keyframeFadeOutDownBig = {
    'from': {
        opacity: '1'
    },
    'to': {
        opacity: '0',
        transform: 'translate3d(0, 2000px, 0)'
    },
};

const keyframeFadeOutLeft = {
    'from': {
        opacity: '1'
    },
    'to': {
        opacity: '0',
        transform: 'translate3d(-100%, 0, 0)'
    },
};

const keyframeFadeOutLeftBig = {
    'from': {
        opacity: '1'

    },
    'to': {
        opacity: '0',
        transform: 'translate3d(-2000px, 0, 0)'
    },
};

const keyframeFadeOutRight = {
    'from': {
        opacity: '1'
    },
    'to': {
        opacity: '0',
        transform: 'translate3d(100%, 0, 0)'
    },
};

const keyframeFadeOutRightBig = {
    'from': {
        opacity: '1'

    },
    'to': {
        opacity: '0',
        transform: 'translate3d(2000px, 0, 0)'
    },
};

const keyframeFadeOutUp = {
    'from': {
        opacity: '1'
    },
    'to': {
        opacity: '0',
        transform: 'translate3d(0, -100%, 0)'
    },
};

const keyframeFadeOutUpBig = {
    'from': {
        opacity: '1'

    },
    'to': {
        opacity: '0',
        transform: 'translate3d(0, -2000px, 0)'
    },
};

const keyframeFadeOutTopLeft = {
    'from': {
        opacity: '1',
        transform: 'translate3d(0, 0, 0)'

    },
    'to': {
        opacity: '0',
        transform: 'translate3d(-100%, -100%, 0)'
    },
};

const keyframeFadeOutTopRight = {
    'from': {
        opacity: '1',
        transform: 'translate3d(0, 0, 0)'

    },
    'to': {
        opacity: '0',
        transform: 'translate3d(100%, -100%, 0)'
    },
};

const keyframeFadeOutBottomLeft= {
    'from': {
        opacity: '1',
        transform: 'translate3d(0, 0, 0)'

    },
    'to': {
        opacity: '0',
        transform: 'translate3d(-100%, 100%, 0)'
    },
};

const keyframeFadeOutBottomRight = {
    'from': {
        opacity: '1',
        transform: 'translate3d(0, 0, 0)'

    },
    'to': {
        opacity: '0',
        transform: 'translate3d(100%, 100%, 0)'
    },
};


exports.keyframeFadeOut = keyframeFadeOut;
exports.keyframeFadeOutDown = keyframeFadeOutDown;
exports.keyframeFadeOutDownBig = keyframeFadeOutDownBig;
exports.keyframeFadeOutLeft = keyframeFadeOutLeft;
exports.keyframeFadeOutLeftBig = keyframeFadeOutLeftBig;
exports.keyframeFadeOutRight = keyframeFadeOutRight;
exports.keyframeFadeOutRightBig = keyframeFadeOutRightBig;
exports.keyframeFadeOutUp = keyframeFadeOutUp;
exports.keyframeFadeOutUpBig = keyframeFadeOutUpBig;
exports.keyframeFadeOutTopLeft = keyframeFadeOutTopLeft;
exports.keyframeFadeOutTopRight = keyframeFadeOutTopRight;
exports.keyframeFadeOutBottomLeft = keyframeFadeOutBottomLeft;
exports.keyframeFadeOutBottomRight = keyframeFadeOutBottomRight;