frontend: add css/_animations.scss
This commit is contained in:
parent
09ba22c19b
commit
13446841d8
1 changed files with 208 additions and 0 deletions
208
twenty-frontend/src/css/_animations.scss
Normal file
208
twenty-frontend/src/css/_animations.scss
Normal file
|
@ -0,0 +1,208 @@
|
||||||
|
|
||||||
|
@charset "UTF-8";
|
||||||
|
/*!
|
||||||
|
* animate.css - https://animate.style/
|
||||||
|
* Version - 4.1.1
|
||||||
|
* Licensed under the Hippocratic License 2.1 - http://firstdonoharm.dev
|
||||||
|
*
|
||||||
|
* Copyright (c) 2023 Animate.css
|
||||||
|
*/
|
||||||
|
:root {
|
||||||
|
--animate-duration: 1s;
|
||||||
|
--animate-delay: 1s;
|
||||||
|
--animate-repeat: 1;
|
||||||
|
}
|
||||||
|
.animate__animated {
|
||||||
|
-webkit-animation-duration: 1s;
|
||||||
|
animation-duration: 1s;
|
||||||
|
-webkit-animation-duration: var(--animate-duration);
|
||||||
|
animation-duration: var(--animate-duration);
|
||||||
|
-webkit-animation-fill-mode: both;
|
||||||
|
animation-fill-mode: both;
|
||||||
|
}
|
||||||
|
.animate__animated.animate__infinite {
|
||||||
|
-webkit-animation-iteration-count: infinite;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
.animate__animated.animate__repeat-1 {
|
||||||
|
-webkit-animation-iteration-count: 1;
|
||||||
|
animation-iteration-count: 1;
|
||||||
|
-webkit-animation-iteration-count: var(--animate-repeat);
|
||||||
|
animation-iteration-count: var(--animate-repeat);
|
||||||
|
}
|
||||||
|
.animate__animated.animate__repeat-2 {
|
||||||
|
-webkit-animation-iteration-count: calc(1 * 2);
|
||||||
|
animation-iteration-count: calc(1 * 2);
|
||||||
|
-webkit-animation-iteration-count: calc(var(--animate-repeat) * 2);
|
||||||
|
animation-iteration-count: calc(var(--animate-repeat) * 2);
|
||||||
|
}
|
||||||
|
.animate__animated.animate__repeat-3 {
|
||||||
|
-webkit-animation-iteration-count: calc(1 * 3);
|
||||||
|
animation-iteration-count: calc(1 * 3);
|
||||||
|
-webkit-animation-iteration-count: calc(var(--animate-repeat) * 3);
|
||||||
|
animation-iteration-count: calc(var(--animate-repeat) * 3);
|
||||||
|
}
|
||||||
|
.animate__animated.animate__delay-1s {
|
||||||
|
-webkit-animation-delay: 1s;
|
||||||
|
animation-delay: 1s;
|
||||||
|
-webkit-animation-delay: var(--animate-delay);
|
||||||
|
animation-delay: var(--animate-delay);
|
||||||
|
}
|
||||||
|
.animate__animated.animate__delay-2s {
|
||||||
|
-webkit-animation-delay: calc(1s * 2);
|
||||||
|
animation-delay: calc(1s * 2);
|
||||||
|
-webkit-animation-delay: calc(var(--animate-delay) * 2);
|
||||||
|
animation-delay: calc(var(--animate-delay) * 2);
|
||||||
|
}
|
||||||
|
.animate__animated.animate__delay-3s {
|
||||||
|
-webkit-animation-delay: calc(1s * 3);
|
||||||
|
animation-delay: calc(1s * 3);
|
||||||
|
-webkit-animation-delay: calc(var(--animate-delay) * 3);
|
||||||
|
animation-delay: calc(var(--animate-delay) * 3);
|
||||||
|
}
|
||||||
|
.animate__animated.animate__delay-4s {
|
||||||
|
-webkit-animation-delay: calc(1s * 4);
|
||||||
|
animation-delay: calc(1s * 4);
|
||||||
|
-webkit-animation-delay: calc(var(--animate-delay) * 4);
|
||||||
|
animation-delay: calc(var(--animate-delay) * 4);
|
||||||
|
}
|
||||||
|
.animate__animated.animate__delay-5s {
|
||||||
|
-webkit-animation-delay: calc(1s * 5);
|
||||||
|
animation-delay: calc(1s * 5);
|
||||||
|
-webkit-animation-delay: calc(var(--animate-delay) * 5);
|
||||||
|
animation-delay: calc(var(--animate-delay) * 5);
|
||||||
|
}
|
||||||
|
.animate__animated.animate__faster {
|
||||||
|
-webkit-animation-duration: calc(1s / 2);
|
||||||
|
animation-duration: calc(1s / 2);
|
||||||
|
-webkit-animation-duration: calc(var(--animate-duration) / 2);
|
||||||
|
animation-duration: calc(var(--animate-duration) / 2);
|
||||||
|
}
|
||||||
|
.animate__animated.animate__fast {
|
||||||
|
-webkit-animation-duration: calc(1s * 0.8);
|
||||||
|
animation-duration: calc(1s * 0.8);
|
||||||
|
-webkit-animation-duration: calc(var(--animate-duration) * 0.8);
|
||||||
|
animation-duration: calc(var(--animate-duration) * 0.8);
|
||||||
|
}
|
||||||
|
.animate__animated.animate__slow {
|
||||||
|
-webkit-animation-duration: calc(1s * 2);
|
||||||
|
animation-duration: calc(1s * 2);
|
||||||
|
-webkit-animation-duration: calc(var(--animate-duration) * 2);
|
||||||
|
animation-duration: calc(var(--animate-duration) * 2);
|
||||||
|
}
|
||||||
|
.animate__animated.animate__slower {
|
||||||
|
-webkit-animation-duration: calc(1s * 3);
|
||||||
|
animation-duration: calc(1s * 3);
|
||||||
|
-webkit-animation-duration: calc(var(--animate-duration) * 3);
|
||||||
|
animation-duration: calc(var(--animate-duration) * 3);
|
||||||
|
}
|
||||||
|
@media print, (prefers-reduced-motion: reduce) {
|
||||||
|
.animate__animated {
|
||||||
|
-webkit-animation-duration: 1ms !important;
|
||||||
|
animation-duration: 1ms !important;
|
||||||
|
-webkit-transition-duration: 1ms !important;
|
||||||
|
transition-duration: 1ms !important;
|
||||||
|
-webkit-animation-iteration-count: 1 !important;
|
||||||
|
animation-iteration-count: 1 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate__animated[class*='Out'] {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* Specials */
|
||||||
|
@-webkit-keyframes hinge {
|
||||||
|
0% {
|
||||||
|
-webkit-animation-timing-function: ease-in-out;
|
||||||
|
animation-timing-function: ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
20%,
|
||||||
|
60% {
|
||||||
|
-webkit-transform: rotate3d(0, 0, 1, 80deg);
|
||||||
|
transform: rotate3d(0, 0, 1, 80deg);
|
||||||
|
-webkit-animation-timing-function: ease-in-out;
|
||||||
|
animation-timing-function: ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
40%,
|
||||||
|
80% {
|
||||||
|
-webkit-transform: rotate3d(0, 0, 1, 60deg);
|
||||||
|
transform: rotate3d(0, 0, 1, 60deg);
|
||||||
|
-webkit-animation-timing-function: ease-in-out;
|
||||||
|
animation-timing-function: ease-in-out;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
-webkit-transform: translate3d(0, 700px, 0);
|
||||||
|
transform: translate3d(0, 700px, 0);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes hinge {
|
||||||
|
0% {
|
||||||
|
-webkit-animation-timing-function: ease-in-out;
|
||||||
|
animation-timing-function: ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
20%,
|
||||||
|
60% {
|
||||||
|
-webkit-transform: rotate3d(0, 0, 1, 80deg);
|
||||||
|
transform: rotate3d(0, 0, 1, 80deg);
|
||||||
|
-webkit-animation-timing-function: ease-in-out;
|
||||||
|
animation-timing-function: ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
40%,
|
||||||
|
80% {
|
||||||
|
-webkit-transform: rotate3d(0, 0, 1, 60deg);
|
||||||
|
transform: rotate3d(0, 0, 1, 60deg);
|
||||||
|
-webkit-animation-timing-function: ease-in-out;
|
||||||
|
animation-timing-function: ease-in-out;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
-webkit-transform: translate3d(0, 700px, 0);
|
||||||
|
transform: translate3d(0, 700px, 0);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.animate__hinge {
|
||||||
|
-webkit-animation-duration: calc(1s * 2);
|
||||||
|
animation-duration: calc(1s * 2);
|
||||||
|
-webkit-animation-duration: calc(var(--animate-duration) * 2);
|
||||||
|
animation-duration: calc(var(--animate-duration) * 2);
|
||||||
|
-webkit-animation-name: hinge;
|
||||||
|
animation-name: hinge;
|
||||||
|
-webkit-transform-origin: top left;
|
||||||
|
transform-origin: top left;
|
||||||
|
}
|
||||||
|
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
|
||||||
|
@-webkit-keyframes rollOut {
|
||||||
|
from {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
|
||||||
|
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes rollOut {
|
||||||
|
from {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
|
||||||
|
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.animate__rollOut {
|
||||||
|
-webkit-animation-name: rollOut;
|
||||||
|
animation-name: rollOut;
|
||||||
|
}
|
Loading…
Reference in a new issue