snippets/css_transition_common


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

@media (prefers-reduced-motion: no-preference) {
  transition:
    opacity .5s ease-in,
    scale   .5s ease-in,
    display .5s ease-in;
  height  .5s ease-in;
  transition-behavior: allow-discrete;
}

@starting-style {
  opacity: 0;
  scale: 1.1;
}

&[hidden] {
  opacity: 0;
  scale: .9;
  display: none !important;
  transition-duration: .4s;
  transition-timing-function: ease-out;
}