#

Animations - Use one, or define your own.

Download v3 View on GitHub

jquery-confirm v - docs
view on Github

back to Main Docs

## Open/Close Animations

Impression lies in what we see.
Different animations can be set for open and close events.

animateFromElement is added since v3.3.0, which animates the modal from the position of the button that was clicked.
This feature does not play well with all the animation styles.

Recommended animations for animateFromElement:

2D animations: (animateFromElement disabled)

3D animations: (animateFromElement disabled)

You can also create/define your own animations

    $.confirm({
        animation: 'zoom',
        closeAnimation: 'scale'
    });
    // Available animations:
    // right, left, bottom, top, rotate, none, opacity, scale, zoom,
    // scaleY, scaleX, rotateY, rotateYR (reverse), rotateX, rotateXR (reverse)

#### Animation bounce

Some eye candy thats in fashion.

    $.confirm({
        animationBounce: 1.5, // default is 1.2 whereas 1 is no bounce.
    });

#### Animation speed

Adjust the duration of animation.

    $.confirm({
        animationSpeed: 2000 // 2 seconds
    });
    $.confirm({
        animationSpeed: 200 // 0.2 seconds
    });

## Define your custom animations

Defining your custom animations lets you match your existing user interface.

Example for a newsflash animation.
These animations are define the starting point of the openAnimation and ending point of the closeAnimation

    .jconfirm .jconfirm-box.jconfirm-animation-news{
        // the animation name is bob
        transform: rotate(400deg) scale(0);
    }

    $.confirm({
        animation: 'news',
        closeAnimation: 'news',
    });

The animation name should be lowercase, or they wont work.

- `.jconfirm-animation-animation-name` translates to 'animation-name'
- `.jconfirm-animation-animationhere` translates to 'animationhere'

## Background dismiss animation

This animation takes place when backgroundDismiss is false, or returns a falsy value.

Example for a newsflash animation.
These animations are define the starting point of the openAnimation and ending point of the closeAnimation

    .jconfirm .jconfirm-box.hilight.jconfirm-hilight-random {
        /*the animation name is bob*/
        transform: translate3d(0,0,0);
        animation: random 2s;
    }
    @keyframes random{
        10%, 90% {
            transform: rotate(-2deg);
        }
        20%, 80% {
            transform: rotate(4deg);
        }
        30%, 50%, 70% {
            transform: rotate(-8deg);
        }
        40%, 60% {
            transform: rotate(8deg);
        }
    }

    $.confirm({
        backgroundDismissAnimation: 'random',
    });

The animation name should be lowercase, or they wont work.