assets/css/component/keyframe.css

@keyframes ellipsis {
    0% {content: '...';}
    25% {content: '';}
    50% {content: '.';}
    100% {content: '..';}
}

@-webkit-keyframes ellipsis {
    0% {content: '...';}
    25% {content: '';}
    50% {content: '.';}
    100% {content: '..';}
}

@-webkit-keyframes idle {
    from, to {border-color: var(--paper);}
    50% {border-color: transparent;}
}

@keyframes idle {
    from, to {border-color: var(--paper);}
    50% {border-color: transparent;}
}

@-webkit-keyframes blinking {
    from, to {visibility: visible;}
    50% {visibility: hidden;}
}

@keyframes blinking {
    from, to {visibility: visible;}
    50% {visibility: hidden;}
}

@keyframes expand {
    from {
        -webkit-transform: scale(1 , 0);
           -moz-transform: scale(1 , 0);
            -ms-transform: scale(1 , 0);
             -o-transform: scale(1 , 0);
                transform: scale(1 , 0);
    }
    to {
        -webkit-transform: scale(1 , 1);
           -moz-transform: scale(1 , 1);
            -ms-transform: scale(1 , 1);
             -o-transform: scale(1 , 1);
                transform: scale(1 , 1);
    }
}

@-webkit-keyframes expand {
    from {
        -webkit-transform: scale(1 , 0);
                transform: scale(1 , 0);
    }
    to {
        -webkit-transform: scale(1 , 1);
                transform: scale(1 , 1);
    }
}

@media (prefers-reduced-motion) {

    @keyframes expand {
        from {
            -webkit-transform: unset;
               -moz-transform: unset;
                -ms-transform: unset;
                 -o-transform: unset;
                    transform: unset;
        }
    }

    @-webkit-keyframes expand {
        from {
            -webkit-transform: unset;
               -moz-transform: unset;
                -ms-transform: unset;
                 -o-transform: unset;
                    transform: unset;
        }
    }

}