Open/Close Animations

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

$.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

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

Animation speed

$.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.

.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.

.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.