packages/ui/src/components/cycle-label.css


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

.cycle-label {
  --c-dur: 200ms;
  --c-stag: 30ms;
  --c-ease: cubic-bezier(0.25, 0, 0.5, 1);
  --c-opacity-start: 0;
  --c-opacity-end: 1;
  --c-blur-start: 0px;
  --c-blur-end: 0px;
  --c-skew: 10deg;

  display: inline-flex;
  position: relative;

  transform-style: preserve-3d;
  perspective: 500px;
  transition: width 200ms var(--c-ease);
  will-change: width;
  overflow: hidden;

  .cycle-char {
    display: inline-block;
    transform-style: preserve-3d;
    min-width: 0.25em;
    backface-visibility: hidden;

    transition:
      transform var(--c-dur) var(--c-ease),
      opacity var(--c-dur) var(--c-ease),
      filter var(--c-dur) var(--c-ease);
    transition-delay: calc(var(--i, 0) * var(--c-stag));

    &.enter {
      opacity: var(--c-opacity-end);
      filter: blur(var(--c-blur-end));
      transform: translateY(0) rotateX(0) skewX(0);
    }

    &.exit {
      opacity: var(--c-opacity-start);
      filter: blur(var(--c-blur-start));
      transform: translateY(50%) rotateX(90deg) skewX(var(--c-skew));
    }

    &.pre {
      opacity: var(--c-opacity-start);
      filter: blur(var(--c-blur-start));
      transition: none;
      transform: translateY(-50%) rotateX(-90deg) skewX(calc(var(--c-skew) * -1));
    }
  }
}