|
|
|
// * Jolly Cobra's transition
|
|
|
|
|
|
|
|
.transition {
|
|
|
|
> .transition-item {
|
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
|
|
left: 0;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
animation-fill-mode: forwards!important;
|
|
|
|
|
|
|
|
&:not(.active):not(.from):not(.to) {
|
|
|
|
display: none !important; // Best performance when animating container
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/*
|
|
|
|
* zoom-fade
|
|
|
|
*/
|
|
|
|
&.zoom-fade {
|
|
|
|
> .from {
|
|
|
|
transform-origin: center;
|
|
|
|
transform: scale(1);
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
|
|
|
|
> .to {
|
|
|
|
transform-origin: center;
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.animating {
|
|
|
|
> .from {
|
|
|
|
animation: fade-out-opacity .15s ease;
|
|
|
|
}
|
|
|
|
|
|
|
|
> .to {
|
|
|
|
animation: fade-in-opacity .15s ease, zoom-fade-in-move .15s ease;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&.zoom-fade.backwards {
|
|
|
|
> .from {
|
|
|
|
transform: scale(1);
|
|
|
|
}
|
|
|
|
|
|
|
|
> .to {
|
|
|
|
transform: scale(0.95);
|
|
|
|
}
|
|
|
|
|
|
|
|
&.animating {
|
|
|
|
> .from {
|
|
|
|
animation: fade-in-backwards-opacity .1s ease, zoom-fade-in-backwards-move .15s ease;
|
|
|
|
}
|
|
|
|
|
|
|
|
> .to {
|
|
|
|
animation: fade-out-backwards-opacity .15s ease, zoom-fade-out-backwards-move .15s ease;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/*
|
|
|
|
* slide-fade
|
|
|
|
*/
|
|
|
|
&.slide-fade {
|
|
|
|
--easeOutSine: cubic-bezier(.39, .575, .565, 1);
|
|
|
|
--easeInSine: cubic-bezier(.47, 0, .745, .715);
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
> .from {
|
|
|
|
transform-origin: left center;
|
|
|
|
transform: translateX(0);
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
|
|
|
|
> .to {
|
|
|
|
transform-origin: left center;
|
|
|
|
transform: translateX(1.5rem);
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.animating {
|
|
|
|
> .from {
|
|
|
|
animation: fade-out-opacity .4s ease-out, slide-fade-out-move .4s;
|
|
|
|
}
|
|
|
|
|
|
|
|
> .to {
|
|
|
|
animation: fade-in-opacity .4s var(--easeInSine), slide-fade-in-move .4s;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&.slide-fade.backwards {
|
|
|
|
> .from {
|
|
|
|
transform: translateX(0);
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
|
|
|
|
> .to {
|
|
|
|
transform: translateX(-1.5rem);
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.animating {
|
|
|
|
> .from {
|
|
|
|
animation: fade-in-backwards-opacity .4s ease-out, slide-fade-in-backwards-move .4s;
|
|
|
|
}
|
|
|
|
|
|
|
|
> .to {
|
|
|
|
animation: fade-out-backwards-opacity .4s var(--easeOutSine), slide-fade-out-backwards-move .4s;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* &.reveal {
|
|
|
|
> .to {
|
|
|
|
clip-path: inset(0 100% 0 0);
|
|
|
|
}
|
|
|
|
|
|
|
|
&.animating {
|
|
|
|
> .to {
|
|
|
|
animation: reveal-in 350ms ease-in;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} */
|
|
|
|
}
|
|
|
|
|
|
|
|
/*
|
|
|
|
* zoom-fade
|
|
|
|
*/
|
|
|
|
@keyframes zoom-fade-in-move {
|
|
|
|
0% {
|
|
|
|
transform: scale(1.1);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
transform: scale(1);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes zoom-fade-in-backwards-move {
|
|
|
|
0% {
|
|
|
|
transform: scale(1);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
transform: scale(1.1);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes zoom-fade-out-backwards-move {
|
|
|
|
0% {
|
|
|
|
transform: scale(0.95);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
transform: scale(1);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/*
|
|
|
|
* slide-fade
|
|
|
|
*/
|
|
|
|
@keyframes slide-fade-in-move {
|
|
|
|
0% {
|
|
|
|
transform: translateX(1.5rem);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
transform: translateX(0);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes slide-fade-out-move {
|
|
|
|
0% {
|
|
|
|
transform: translateX(0);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
transform: translateX(-1.5rem);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes slide-fade-in-backwards-move {
|
|
|
|
0% {
|
|
|
|
transform: translateX(0);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
transform: translateX(1.5rem);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes slide-fade-out-backwards-move {
|
|
|
|
0% {
|
|
|
|
transform: translateX(-1.5rem);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
transform: translateX(0);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* @keyframes reveal-in {
|
|
|
|
0% {
|
|
|
|
clip-path: inset(0 100% 0 0);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
clip-path: inset(0 0 0 0);
|
|
|
|
}
|
|
|
|
} */
|
|
|
|
|
|
|
|
/* .zoom-fade {
|
|
|
|
transition: .15s ease-in-out opacity, .15s ease-in-out transform;
|
|
|
|
transform: scale3d(1.1, 1.1, 1);
|
|
|
|
opacity: 0;
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
&.active {
|
|
|
|
transform: scale3d(1, 1, 1);
|
|
|
|
transform-origin: center;
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
} */
|