.flext-has-animation {
animation-play-state: paused;
opacity: 0.01;
}
.flext-animated {
animation-duration: 1s;
animation-fill-mode: both;
animation-play-state: running;
animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
opacity: 1;
}
.flext-animation-delay-125 {
animation-delay: 0.125s;
}
.flext-animation-delay-250 {
animation-delay: 0.25s;
}
.flext-animation-delay-375 {
animation-delay: 0.375s;
}
.flext-animation-delay-500 {
animation-delay: 0.5s;
}
.flext-animation-delay-625 {
animation-delay: 0.625s;
}
.flext-animation-delay-750 {
animation-delay: 0.75s;
}
.flext-animation-delay-875 {
animation-delay: 0.875s;
}
.flext-animation-delay-1000 {
animation-delay: 1s;
}
.flext-animation-delay-1125 {
animation-delay: 1.125s;
}
.flext-animation-delay-1250 {
animation-delay: 1.25s;
}
.flext-animation-delay-1375 {
animation-delay: 1.375s;
}
.flext-animation-delay-1500 {
animation-delay: 1.5s;
}
.flext-animation-delay-1625 {
animation-delay: 1.625s;
}
.flext-animation-delay-1750 {
animation-delay: 1.75s;
}
.flext-animation-delay-1875 {
animation-delay: 1.875s;
}
.flext-animation-delay-2000 {
animation-delay: 2s;
} @keyframes flext-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.flext-animation-fade-in.flext-animated {
animation-name: flext-fade-in;
} @keyframes flext-fade-up {
from {
opacity: 0;
transform: translateY(7rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.flext-animation-fade-up.flext-animated {
animation-name: flext-fade-up;
transform-origin: 50% 0;
} @keyframes flext-fade-down {
from {
opacity: 0;
transform: translateY(-7rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.flext-animation-fade-down.flext-animated {
animation-name: flext-fade-down;
transform-origin: 50% 100%;
} @keyframes flext-fade-left {
from {
opacity: 0;
transform: translateX(-7rem);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.flext-animation-fade-left.flext-animated {
animation-name: flext-fade-left;
transform-origin: 50% 0;
} @keyframes flext-fade-right {
from {
opacity: 0;
transform: translateX(7rem);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.flext-animation-fade-right.flext-animated {
animation-name: flext-fade-right;
transform-origin: 50% 0;
} @keyframes flext-elastic-in-up {
from {
opacity: 0;
transform: translateY(7rem) scaleY(1.35);
}
to {
opacity: 1;
transform: translateY(0) scaleY(1);
}
}
.flext-animation-elastic-in-up.flext-animated {
animation-name: flext-elastic-in-up;
transform-origin: 50% 0;
} @keyframes flext-elastic-in-down {
from {
opacity: 0;
transform: translateY(-7rem) scaleY(1.35);
}
to {
opacity: 1;
transform: translateY(0) scaleY(1);
}
}
.flext-animation-elastic-in-down.flext-animated {
animation-name: flext-elastic-in-down;
transform-origin: 50% 100%;
} @keyframes flext-elastic-in-left {
from {
opacity: 0;
transform: translateX(-7rem) scaleX(1.35);
}
to {
opacity: 1;
transform: translateX(0) scaleX(1);
}
}
.flext-animation-elastic-in-left.flext-animated {
animation-name: flext-elastic-in-left;
transform-origin: 100% 50%;
} @keyframes flext-elastic-in-right {
from {
opacity: 0;
transform: translateX(7rem) scaleX(1.35);
}
to {
opacity: 1;
transform: translateX(0) scaleX(1);
}
}
.flext-animation-elastic-in-right.flext-animated {
animation-name: flext-elastic-in-right;
transform-origin: 0% 50%;
} @keyframes flext-zoom-in {
from {
opacity: 0;
transform: scale(0);
}
to {
opacity: 1;
transform: scale(1);
}
}
.flext-animation-zoom-in.flext-animated {
animation-name: flext-zoom-in;
transform-origin: 50% 50%;
} @keyframes flext-zoom-in-up {
from {
opacity: 0;
transform: translateY(30rem) scale(0);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.flext-animation-zoom-in-up.flext-animated {
animation-name: flext-zoom-in-up;
transform-origin: 50% 100%;
} @keyframes flext-zoom-in-down {
from {
opacity: 0;
transform: translateY(-30rem) scale(0);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.flext-animation-zoom-in-down.flext-animated {
animation-name: flext-zoom-in-down;
transform-origin: 50% 0;
} @keyframes flext-zoom-in-left {
from {
opacity: 0;
transform: translateX(-15rem) scale(0);
}
to {
opacity: 1;
transform: translateX(0) scale(1);
}
}
.flext-animation-zoom-in-left.flext-animated {
animation-name: flext-zoom-in-left;
transform-origin: 0% 50%;
} @keyframes flext-zoom-in-right {
from {
opacity: 0;
transform: translateX(15rem) scale(0);
}
to {
opacity: 1;
transform: translateX(0) scale(1);
}
}
.flext-animation-zoom-in-right.flext-animated {
animation-name: flext-zoom-in-right;
transform-origin: 100% 50%;
} @keyframes flext-stretch-in-left {
from {
transform: scaleX(0);
transform-origin: center left;
}
to {
transform: scaleX(1);
transform-origin: center left;
}
}
.flext-animation-stretch-in-left.flext-animated {
animation-name: flext-stretch-in-left;
} @keyframes flext-stretch-in-right {
from {
transform: scaleX(0);
transform-origin: center right;
}
to {
transform: scaleX(1);
transform-origin: center right;
}
}
.flext-animation-stretch-in-right.flext-animated {
animation-name: flext-stretch-in-right;
} @keyframes flext-rotate-in-up-left {
from {
opacity: 0;
transform: rotate(10deg) scale(1, 0.5) translate(0, 10px);
}
to {
opacity: 1;
transform: scaleX(0deg) scale(0) translate(0);
}
}
.flext-animation-rotate-in-up-left.flext-animated {
animation-name: flext-rotate-in-up-left;
transform-origin: 0 0;
} @keyframes flext-rotate-in-up-right {
from {
opacity: 0;
transform: rotate(-10deg) scale(1, 0.5) translate(0, 10px);
}
to {
opacity: 1;
transform: scaleX(0deg) scale(0) translate(0);
}
}
.flext-animation-rotate-in-up-right.flext-animated {
animation-name: flext-rotate-in-up-right;
transform-origin: 100% 0;
} @keyframes flext-flip-in-from-top {
from {
opacity: 0;
transform: perspective(1000px) translate3d(0, -130%, 0) rotateX(40deg);
}
20% {
opacity: 1;
}
to {
transform: perspective(1000px) translate3d(0, 0, 0) rotateX(0);
}
}
.flext-animation-flip-in-from-top.flext-animated {
animation-name: flext-flip-in-from-top;
animation-duration: 1.4s;
} @keyframes flext-flip-in-from-bottom {
from {
opacity: 0;
transform: perspective(1000px) translate3d(0, 130%, 0) rotateX(-40deg);
}
20% {
opacity: 1;
}
to {
transform: perspective(1000px) translate3d(0, 0, 0) rotateX(0);
}
}
.flext-animation-flip-in-from-bottom.flext-animated {
animation-name: flext-flip-in-from-bottom;
animation-duration: 1.4s;
transform-style: preserve-3d;
} @keyframes flext-slide-back {
from {
clip-path: inset(0 0 99% 0);
transform: scale(1.4);
}
60% {
clip-path: inset(-5% -5% -5% -5%);
}
to {
clip-path: none;
transform: scale(1);
}
}
.flext-animation-slide-back.flext-animated {
animation-name: flext-slide-back;
animation-duration: 2s;
} @keyframes flext-fly-in {
from {
opacity: 0;
transform: scale(1.4);
}
to {
opacity: 1;
transform: scale(1);
}
}
.flext-animation-fly-in.flext-animated {
animation-name: flext-fly-in;
animation-duration: 2s;
} @keyframes flext-reveal {
from {
opacity: 1;
-webkit-mask-image: linear-gradient(315deg, transparent 25%, #000 75%);
mask-image: linear-gradient(315deg, transparent 25%, #000 75%);
-webkit-mask-position: 100%;
mask-position: 100%;
-webkit-mask-size: 1000% 1000%;
mask-size: 1000% 1000%;
}
to {
opacity: 1;
-webkit-mask-image: linear-gradient(315deg, #0000 25%, #000 75%);
mask-image: linear-gradient(315deg, #0000 25%, #000 75%);
-webkit-mask-position: 0;
mask-position: 0;
-webkit-mask-size: 1000% 1000%;
mask-size: 1000% 1000%;
}
}
.flext-animation-reveal.flext-animated {
animation-name: flext-reveal;
animation-duration: 2s;
-webkit-mask-size: 1000% 1000%;
mask-size: 1000% 1000%;
} @keyframes flext-swing {
0% {
transform: rotate(-15deg);
}
5% {
transform: rotate(25deg);
}
10% {
transform: rotate(-10deg);
}
40% {
transform: rotate(380deg);
}
50% {
transform: rotate(330deg);
}
55% {
transform: rotate(370deg);
}
80% {
transform: rotate(-20deg);
}
90% {
transform: rotate(30deg);
}
to {
transform: rotate(-15deg);
}
}
.flext-animation-swing.flext-animated {
animation-name: flext-swing;
animation-direction: alternate;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
transform-origin: center;
} @keyframes flext-rotate {
0% {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
.flext-animation-rotate.flext-animated > * {
animation-name: flext-rotate;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
transform-origin: center;
} .flext-has-highlight {
--flext-highlight-color: #000;
background-color: transparent;
display: inline-block;
position: relative;
z-index: 1;
}
.flext-has-highlight::before {
content: "";
display: inline-block;
opacity: 0.7;
position: absolute;
z-index: -1;
} .flext-has-highlight.flext-is-style-underline {
padding-bottom: 0.25rem;
}
.flext-has-highlight.flext-is-style-underline::before {
border-top: 2px solid var(--flext-highlight-color);
border-radius: 0.2em 0 0 0;
bottom: -0.25rem;
height: 1rem;
left: 0;
transform: rotate(-2deg);
transform-origin: right top;
transition: width 0.25s ease-in 0.3s;
width: 0;
}
.flext-has-highlight.flext-is-style-underline.flext-animated::before {
width: 100%;
}
.flext-has-highlight.flext-is-style-underline::after {
border-left: 2px solid transparent;
border-radius: 0.1em 0 0 0.4em;
bottom: -0.25rem;
content: "";
height: 1rem;
opacity: 0.7;
position: absolute;
right: -1rem;
transform: rotate(75deg);
transform-origin: left top;
transition: border-left-color 0.1s ease-out 0.6s;
width: 1rem;
z-index: -1;
}
.flext-has-highlight.flext-is-style-underline.flext-animated::after {
border-left-color: var(--flext-highlight-color);
} .flext-has-highlight.flext-is-style-strikethrough {
padding-bottom: 0.25rem;
}
.flext-has-highlight.flext-is-style-strikethrough::before {
background: var(--flext-highlight-color);
border-radius: 0.36em 0;
bottom: 0.25em;
height: 0.3em;
left: 0;
transform: rotate(-1deg);
transition: width 0.25s ease-in 0.3s;
width: 0;
}
.flext-has-highlight.flext-is-style-strikethrough.flext-animated::before {
width: 100%;
} .flext-has-highlight.flext-is-style-rectangle {
--flext-rec-clip-path: min(15%, 15px);
padding: 0.25rem;
}
.flext-has-highlight.flext-is-style-rectangle::before {
border: 2px solid var(--flext-highlight-color);
border-radius: 255px 15px 255px 15px / 15px 255px 15px 255px;
bottom: 0;
clip-path: inset(100%);
left: -0.25rem;
right: -0.25rem;
top: 0;
}
.flext-has-highlight.flext-is-style-rectangle.flext-animated::before {
animation: flext-rectangle-draw 1s ease 0.3s forwards;
}
@keyframes flext-rectangle-draw {
0% {
clip-path: polygon(var(--flext-rec-clip-path) var(--flext-rec-clip-path), calc(100% - var(--flext-rec-clip-path)) var(--flext-rec-clip-path), calc(100% - var(--flext-rec-clip-path)) calc(100% - var(--flext-rec-clip-path)), var(--flext-rec-clip-path) calc(100% - var(--flext-rec-clip-path)), var(--flext-rec-clip-path) var(--flext-rec-clip-path), 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0);
}
0.1% {
clip-path: polygon(var(--flext-rec-clip-path) var(--flext-rec-clip-path), calc(100% - var(--flext-rec-clip-path)) var(--flext-rec-clip-path), calc(100% - var(--flext-rec-clip-path)) calc(100% - var(--flext-rec-clip-path)), var(--flext-rec-clip-path) calc(100% - var(--flext-rec-clip-path)), var(--flext-rec-clip-path) var(--flext-rec-clip-path), 0 0, 0 0, 0 var(--flext-rec-clip-path), var(--flext-rec-clip-path) var(--flext-rec-clip-path), 0 0, 0 0, 0 0, calc(100% - var(--flext-rec-clip-path)) calc(100% - var(--flext-rec-clip-path)), calc(100% - var(--flext-rec-clip-path)) calc(100% - var(--flext-rec-clip-path)), 100% 100%, 100% 100%, calc(100% - var(--flext-rec-clip-path)) calc(100% - var(--flext-rec-clip-path)), var(--flext-rec-clip-path) calc(100% - var(--flext-rec-clip-path)), var(--flext-rec-clip-path) calc(100% - var(--flext-rec-clip-path)), 0 100%, 0 100%, var(--flext-rec-clip-path) calc(100% - var(--flext-rec-clip-path)));
}
23.9% {
clip-path: polygon(var(--flext-rec-clip-path) var(--flext-rec-clip-path), calc(100% - var(--flext-rec-clip-path)) var(--flext-rec-clip-path), calc(100% - var(--flext-rec-clip-path)) calc(100% - var(--flext-rec-clip-path)), var(--flext-rec-clip-path) calc(100% - var(--flext-rec-clip-path)), var(--flext-rec-clip-path) var(--flext-rec-clip-path), 0 0, 100% 0, calc(100% - var(--flext-rec-clip-path)) var(--flext-rec-clip-path), calc(100% - var(--flext-rec-clip-path)) 0, 100% 0, 100% 0, calc(100% - var(--flext-rec-clip-path)) var(--flext-rec-clip-path), calc(100% - var(--flext-rec-clip-path)) calc(100% - var(--flext-rec-clip-path)), calc(100% - var(--flext-rec-clip-path)) calc(100% - var(--flext-rec-clip-path)), 100% 100%, 100% 100%, calc(100% - var(--flext-rec-clip-path)) calc(100% - var(--flext-rec-clip-path)), var(--flext-rec-clip-path) calc(100% - var(--flext-rec-clip-path)), var(--flext-rec-clip-path) calc(100% - var(--flext-rec-clip-path)), 0 100%, 0 100%, var(--flext-rec-clip-path) calc(100% - var(--flext-rec-clip-path)));
}
50% {
clip-path: polygon(var(--flext-rec-clip-path) var(--flext-rec-clip-path), calc(100% - var(--flext-rec-clip-path)) var(--flext-rec-clip-path), calc(100% - var(--flext-rec-clip-path)) calc(100% - var(--flext-rec-clip-path)), var(--flext-rec-clip-path) calc(100% - var(--flext-rec-clip-path)), var(--flext-rec-clip-path) var(--flext-rec-clip-path), 0 0, 100% 0, calc(100% - var(--flext-rec-clip-path)) var(--flext-rec-clip-path), calc(100% - var(--flext-rec-clip-path)) calc(100% - var(--flext-rec-clip-path)), 100% 100%, 100% 0, calc(100% - var(--flext-rec-clip-path)) var(--flext-rec-clip-path), calc(100% - var(--flext-rec-clip-path)) calc(100% - var(--flext-rec-clip-path)), calc(100% - var(--flext-rec-clip-path)) calc(100% - var(--flext-rec-clip-path)), 100% 100%, 100% 100%, calc(100% - var(--flext-rec-clip-path)) calc(100% - var(--flext-rec-clip-path)), var(--flext-rec-clip-path) calc(100% - var(--flext-rec-clip-path)), var(--flext-rec-clip-path) calc(100% - var(--flext-rec-clip-path)), 0 100%, 0 100%, var(--flext-rec-clip-path) calc(100% - var(--flext-rec-clip-path)));
}
73.9% {
clip-path: polygon(var(--flext-rec-clip-path) var(--flext-rec-clip-path), calc(100% - var(--flext-rec-clip-path)) var(--flext-rec-clip-path), calc(100% - var(--flext-rec-clip-path)) calc(100% - var(--flext-rec-clip-path)), var(--flext-rec-clip-path) calc(100% - var(--flext-rec-clip-path)), var(--flext-rec-clip-path) var(--flext-rec-clip-path), 0 0, 100% 0, calc(100% - var(--flext-rec-clip-path)) var(--flext-rec-clip-path), calc(100% - var(--flext-rec-clip-path)) calc(100% - var(--flext-rec-clip-path)), 100% 100%, 100% 0, calc(100% - var(--flext-rec-clip-path)) var(--flext-rec-clip-path), calc(100% - var(--flext-rec-clip-path)) calc(100% - var(--flext-rec-clip-path)), var(--flext-rec-clip-path) calc(100% - var(--flext-rec-clip-path)), 0 100%, 100% 100%, calc(100% - var(--flext-rec-clip-path)) calc(100% - var(--flext-rec-clip-path)), var(--flext-rec-clip-path) calc(100% - var(--flext-rec-clip-path)), var(--flext-rec-clip-path) calc(100% - var(--flext-rec-clip-path)), 0 100%, 0 100%, var(--flext-rec-clip-path) calc(100% - var(--flext-rec-clip-path)));
}
100% {
clip-path: polygon(var(--flext-rec-clip-path) var(--flext-rec-clip-path), calc(100% - var(--flext-rec-clip-path)) var(--flext-rec-clip-path), calc(100% - var(--flext-rec-clip-path)) calc(100% - var(--flext-rec-clip-path)), var(--flext-rec-clip-path) calc(100% - var(--flext-rec-clip-path)), var(--flext-rec-clip-path) var(--flext-rec-clip-path), 0 0, 100% 0, calc(100% - var(--flext-rec-clip-path)) var(--flext-rec-clip-path), calc(100% - var(--flext-rec-clip-path)) calc(100% - var(--flext-rec-clip-path)), 100% 100%, 100% 0, calc(100% - var(--flext-rec-clip-path)) var(--flext-rec-clip-path), calc(100% - var(--flext-rec-clip-path)) calc(100% - var(--flext-rec-clip-path)), var(--flext-rec-clip-path) calc(100% - var(--flext-rec-clip-path)), 0 100%, 100% 100%, calc(100% - var(--flext-rec-clip-path)) calc(100% - var(--flext-rec-clip-path)), var(--flext-rec-clip-path) calc(100% - var(--flext-rec-clip-path)), var(--flext-rec-clip-path) var(--flext-rec-clip-path), 0 0, 0 100%, var(--flext-rec-clip-path) calc(100% - var(--flext-rec-clip-path)));
}
} .flext-has-highlight.flext-is-style-oval {
padding: 0.25rem;
}
.flext-has-highlight.flext-is-style-oval::before {
border: 2px solid transparent;
border-radius: 48%;
bottom: 0.1em;
left: -0.2em;
right: -0.2em;
top: 0.1em;
transform: rotate(-3deg);
}
@keyframes flext-oval-draw {
0% {
border-left-color: transparent;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
}
1% {
border-left-color: var(--flext-highlight-color);
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
}
23.9% {
border-left-color: var(--flext-highlight-color);
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
}
50% {
border-left-color: var(--flext-highlight-color);
border-top-color: var(--flext-highlight-color);
border-right-color: transparent;
border-bottom-color: transparent;
}
73.9% {
border-left-color: var(--flext-highlight-color);
border-top-color: var(--flext-highlight-color);
border-right-color: var(--flext-highlight-color);
border-bottom-color: transparent;
}
100% {
border-top-color: var(--flext-highlight-color);
border-right-color: var(--flext-highlight-color);
border-bottom-color: var(--flext-highlight-color);
border-left-color: var(--flext-highlight-color);
}
}
.flext-has-highlight.flext-is-style-oval.flext-animated::before {
animation: flext-oval-draw 0.3s ease-in-out 0.3s forwards;
} .flext-has-highlight.flext-is-style-background::before,
.flext-has-highlight.flext-is-style-background::after {
background-color: var(--flext-highlight-color);
height: 90%;
margin-left: -0.2rem;
margin-right: -0.2rem;
transform: scaleX(0);
transform-origin: 0 0;
transition: transform 0.3s ease-in 0.3s;
width: 100%;
}
.flext-has-highlight.flext-is-style-background::before {
left: -0.1rem;
transform: scaleX(0) rotate(2deg);
top: -0.1rem;
}
.flext-has-highlight.flext-is-style-background::after {
content: "";
display: inline-block;
opacity: 0.7;
position: absolute;
right: -0.2rem;
top: 0.3rem;
transition-delay: 0.6s;
z-index: -1;
}
.flext-has-highlight.flext-is-style-background.flext-animated::before {
transform: scaleX(1) rotate(2deg);
}
.flext-has-highlight.flext-is-style-background.flext-animated::after {
transform: scaleX(1);
} .flext-format-underline {
text-decoration: underline;
} .flext-has-inline-animation {
display: inline-block;
opacity: 0;
position: relative;
vertical-align: top;
white-space: nowrap;
}
.flext-has-inline-animation.flext-is-animated {
opacity: 1;
}
.flext-has-inline-animation * {
display: inline-block;
position: relative;
vertical-align: top;
white-space: nowrap;
}
.flext-has-inline-animation em,
em .flext-has-inline-animation,
.flext-has-inline-animation i,
i .flext-has-inline-animation {
padding-right: 0.2em;
}
.flext-has-inline-animation .flext-inline-word {
left: 0;
position: absolute;
top: 0;
}
.flext-has-inline-animation .flext-is-hidden {
opacity: 0;
}
.flext-inline-animation .flext-inline-letter {
display: inline-block;
white-space: pre;
} .flext-inline-clip {
border-right: 1px solid #000;
box-sizing: content-box;
overflow: hidden;
padding: 0 2px 0 0;
width: 0;
}
.flext-inline-clip.flext-is-animated {
width: auto;
} .flext-inline-fade-up.flext-inline-animation,
.flext-inline-fade-up .flext-inline-animation {
overflow: hidden;
transition: width 0.3s;
}
.flext-inline-fade-up .flext-inline-word {
backface-visibility: hidden;
opacity: 0;
transform: translateY(50%);
}
.flext-inline-fade-up .flext-is-visible {
animation: flext-inline-fade-up-in 0.5s forwards;
}
.flext-inline-fade-up .flext-is-hidden {
animation: flext-inline-fade-up-out 0.5s forwards;
}
@keyframes flext-inline-fade-up-in {
0% {
opacity: 0;
transform: translateY(50%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes flext-inline-fade-up-out {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(50%);
}
} .flext-inline-flip-horizontal {
perspective: 300px;
}
.flext-inline-flip-horizontal.flext-inline-animation,
.flext-inline-flip-horizontal .flext-inline-animation {
transition: width 0.3s;
}
.flext-inline-flip-horizontal .flext-is-hidden {
opacity: 1;
}
.flext-inline-flip-horizontal .flext-inline-letter {
backface-visibility: hidden;
transform: rotateY(180deg);
}
.flext-inline-flip-horizontal .flext-in {
animation: flext-inline-flip-horizontal-in 0.3s forwards;
}
.flext-inline-flip-horizontal .flext-out {
animation: flext-inline-flip-horizontal-out 0.3s forwards;
}
@keyframes flext-inline-flip-horizontal-in {
0% {
transform: rotateY(180deg);
}
100% {
transform: rotateY(0);
}
}
@keyframes flext-inline-flip-horizontal-out {
0% {
transform: rotateY(0);
}
100% {
transform: rotateY(-180deg);
}
} .flext-inline-flip-vertical.flext-inline-animation,
.flext-inline-flip-vertical .flext-inline-animation {
perspective: 300px;
transition: width 0.3s;
}
.flext-inline-flip-vertical .flext-is-hidden {
opacity: 1;
}
.flext-inline-flip-vertical .flext-inline-letter {
backface-visibility: hidden;
transform: translateZ(-20px) rotateX(90deg);
transform-style: preserve-3d;
}
.flext-inline-flip-vertical .flext-in {
animation: flext-inline-flip-vertical-in 0.3s forwards;
}
.flext-inline-flip-vertical .flext-out {
animation: flext-inline-flip-vertical-out 0.3s forwards;
}
@keyframes flext-inline-flip-vertical-in {
0% {
opacity: 0;
transform: translateZ(-20px) rotateX(90deg);
}
60% {
opacity: 1;
transform: translateZ(-20px) rotateX(-10deg);
}
100% {
opacity: 1;
transform: translateZ(-20px) rotateX(0deg);
}
}
@keyframes flext-inline-flip-vertical-out {
0% {
opacity: 1;
transform: translateZ(-20px) rotateX(0);
}
60% {
opacity: 0;
transform: translateZ(-20px) rotateX(-100deg);
}
100% {
opacity: 0;
transform: translateZ(-20px) rotateX(-90deg);
}
} .flext-inline-slide-horizontal.flext-inline-animation,
.flext-inline-slide-horizontal .flext-inline-animation {
overflow: hidden;
transition: width 0.3s;
}
.flext-inline-slide-horizontal .flext-is-visible {
animation: flext-inline-slide-horizontal-in 0.6s forwards;
}
.flext-inline-slide-horizontal .flext-is-hidden {
animation: flext-inline-slide-horizontal-out 0.6s forwards;
}
@keyframes flext-inline-slide-horizontal-in {
0% {
opacity: 0;
transform: translateX(-100%);
}
60% {
opacity: 1;
transform: translateX(20%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes flext-inline-slide-horizontal-out {
0% {
opacity: 1;
transform: translateX(0);
}
60% {
opacity: 0;
transform: translateX(120%);
}
100% {
opacity: 0;
transform: translateX(100%);
}
} .flext-inline-slide-vertical.flext-inline-animation,
.flext-inline-slide-vertical .flext-inline-animation {
overflow: hidden;
transition: width 0.3s;
}
.flext-inline-slide-vertical .flext-is-visible {
animation: flext-inline-slide-vertical-in 0.6s;
}
.flext-inline-slide-vertical .flext-is-hidden {
animation: flext-inline-slide-vertical-out 0.6s;
}
@keyframes flext-inline-slide-vertical-in {
0% {
opacity: 0;
transform: translateY(-100%);
}
60% {
opacity: 1;
transform: translateY(20%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes flext-inline-slide-vertical-out {
0% {
opacity: 1;
transform: translateY(0);
}
60% {
opacity: 0;
transform: translateY(120%);
}
100% {
opacity: 0;
transform: translateY(100%);
}
} .flext-inline-typewriter {
width: 0;
}
.flext-inline-typewriter.flext-is-animated {
width: auto;
}
.flext-inline-typewriter .flext-inline-word {
position: relative;
}
.flext-inline-typewriter .flext-inline-word.flext-is-selected {
background: #000;
color: #fff;
}
.flext-inline-typewriter .flext-inline-word::after {
display: inline-block;
content: "|";
vertical-align: top;
}
.flext-inline-typewriter .flext-inline-word.flext-cursor-blink::after {
animation: flext-inline-typewriter-blink 1s step-end infinite;
}
@keyframes flext-inline-typewriter-blink {
from,
to {
color: transparent;
}
50% {
color: inherit;
}
} .flext-inline-zoom-in.flext-inline-animation,
.flext-inline-zoom-in .flext-inline-animation {
transition: width 0.3s;
}
.flext-inline-zoom-in .flext-inline-word {
backface-visibility: hidden;
}
.flext-inline-zoom-in .flext-is-visible {
animation: flext-inline-zoom-in-in 0.6s forwards;
}
.flext-inline-zoom-in .flext-is-hidden {
animation: flext-inline-zoom-in-out 0.6s forwards;
}
@keyframes flext-inline-zoom-in-in {
0% {
opacity: 0;
transform: scale(0);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes flext-inline-zoom-in-out {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0);
}
} .flext-inline-zoom-out.flext-inline-animation,
.flext-inline-zoom-out .flext-inline-animation {
transition: width 0.3s ease-out 0.15s;
}
.flext-inline-zoom-out .flext-inline-word {
backface-visibility: hidden;
}
.flext-inline-zoom-out .flext-is-visible {
animation: flext-inline-zoom-out-in 0.6s forwards;
}
.flext-inline-zoom-out .flext-is-hidden {
animation: flext-inline-zoom-out-out 0.6s forwards;
}
@keyframes flext-inline-zoom-out-in {
0% {
opacity: 0;
transform: scale(2);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes flext-inline-zoom-out-out {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(2);
}
}