element-web/res/css/_animations.pcss

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

/**
 * React Transition Group animations are prefixed with 'mx_rtg--' so that we
 * know they should not be used anywhere outside of React Transition Groups.
*/

.mx_rtg--fade-enter {
    opacity: 0;
}
.mx_rtg--fade-enter-active {
    opacity: 1;
    transition: opacity 300ms ease;
}
.mx_rtg--fade-exit {
    opacity: 1;
}
.mx_rtg--fade-exit-active {
    opacity: 0;
    transition: opacity 300ms ease;
}

:root {
    --hover-transition: 0.08s cubic-bezier(0.46, 0.03, 0.52, 0.96); /* quadratic */
}

@keyframes mx--anim-pulse {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
    100% {
        opacity: 1;
    }
}

@keyframes mx_Dialog_lightbox_background_keyframes {
    from {
        opacity: 0;
    }
    to {
        opacity: $lightbox-background-bg-opacity;
    }
}

@keyframes mx_ImageView_panel_keyframes {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion) {
    @keyframes mx--anim-pulse {
        /* Override all keyframes in reduced-motion */
    }

    @keyframes mx_Dialog_lightbox_background_keyframes {
        /* Override all keyframes in reduced-motion */
    }

    @keyframes mx_ImageView_panel_keyframes {
        /* Override all keyframes in reduced-motion */
    }

    .mx_rtg--fade-enter-active {
        transition: none;
    }
    .mx_rtg--fade-exit-active {
        transition: none;
    }
}