chore: generate
This commit is contained in:
@@ -1,52 +1,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;
|
||||
--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;
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
|
||||
transform-style: preserve-3d;
|
||||
perspective: 500px;
|
||||
transition: width 200ms var(--c-ease);
|
||||
will-change: width;
|
||||
overflow: hidden;
|
||||
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;
|
||||
.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));
|
||||
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);
|
||||
}
|
||||
&.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));
|
||||
}
|
||||
&.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));
|
||||
}
|
||||
}
|
||||
&.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));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user