Recommended animations for animateFromElement:

scale rotateY rotateYR rotateX rotateXR

2D animations: (animateFromElement disabled)

right left bottom top Rotate none opacity

3D animations: (animateFromElement disabled)

scale (default) zoom scaleY scaleX RotateY RotateYR RotateX RotateXR

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)

Some eye candy thats in fashion.

No bounce 1.5 bounce 2 bounce 2.5 bounce

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

Adjust the duration of animation.

I'm too Late I'm too Quick

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

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

Custom animation

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

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

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

Custom animation

.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',
});