AnimatedDialog.module.scss

@import '~office-ui-fabric-react/dist/sass/References.scss';

$themePrimary: '[theme:themePrimary, default:#0078d7]';

.animatedDialogTitleContainer{
    text-align: center;
    i {
      font-size: 52px;
      color: $themePrimary;
    }
  
    span {
      font-size: 32px;
      font-weight: 600;
      margin: 0 0 .4em;
    }
  }

AnimatedDialog.tsx

import React, { FC, useEffect, useState } from 'react';
import styles from './AnimatedDialog.module.scss';
import { Dialog, IDialogProps } from 'office-ui-fabric-react/lib/Dialog';
import { SPComponentLoader } from '@microsoft/sp-loader';
import { Icon } from 'office-ui-fabric-react/lib/Icon';

export interface IAnimatedDialogProps extends IDialogProps {
    dialogAnimationInType?: string;
    dialogAnimationOutType?: string;
    iconName?: string;
    iconAnimationType?: string;
}

const AnimatedDialog: FC<IAnimatedDialogProps> = (props) => {

    const [dialogProps, setDialogProps] = useState<IDialogProps>(props);

    const { dialogAnimationInType, dialogAnimationOutType,
        iconName, iconAnimationType,
        modalProps, dialogContentProps } = props;

    const animationPrefix: string = `animate__`;
    const mainAnimationClass: string = `${animationPrefix}animated`;
    const currentContainerClass: string = modalProps.containerClassName;
    const containerAnimationClass: string = `${currentContainerClass} ${mainAnimationClass} ${animationPrefix}fast`;
    const defaultDialogAnimationClass: string = `${animationPrefix}bounceIn`;
    const defaultIconAnimationClass: string = `${animationPrefix}zoomIn`;


    useEffect(() => {
        SPComponentLoader.loadCss('https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css');
    }, []);

    useEffect(() => {

        let containerClassName: string = `${containerAnimationClass} ${defaultDialogAnimationClass}`;
        let title: string | JSX.Element = dialogContentProps.title;

        if (props.dialogAnimationInType) {
            containerClassName = `${containerAnimationClass} ${animationPrefix}${dialogAnimationInType}`;
        }

        if (iconName) {
            title =
                <div className={styles.animatedDialogTitleContainer}>
                    <Icon
                        iconName={iconName}
                        className={iconAnimationType ?
                            `${mainAnimationClass} ${animationPrefix}${iconAnimationType}` :
                            `${mainAnimationClass} ${defaultIconAnimationClass}`} />
                    <br />
                    <span>{props.dialogContentProps.title}</span>
                </div>;
        }

        if (props.hidden) {
            containerClassName = `${currentContainerClass} ${mainAnimationClass} ${animationPrefix}fast `;
            containerClassName += dialogAnimationOutType ?
                `${animationPrefix}${dialogAnimationOutType}` :
                `${animationPrefix}zoomOut`;
        }

        setDialogProps({
            ...props,
            modalProps: { ...modalProps, containerClassName },
            dialogContentProps: { ...dialogContentProps, title }
        });


    }, [props.hidden]);

    return (
        <Dialog {...dialogProps}>
            {props.children}
        </Dialog>
    );
};

export default AnimatedDialog;