riot-web/res/css/_animations.pcss

83 lines
1.6 KiB
Plaintext

/*
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
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;
}
}