52 lines
1.2 KiB
CSS
52 lines
1.2 KiB
CSS
.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));
|
|
}
|
|
}
|
|
}
|