mirror of
https://github.com/d0zingcat/NotionNext.git
synced 2026-05-14 07:26:52 +00:00
504 lines
10 KiB
CSS
504 lines
10 KiB
CSS
@charset "UTF-8";/*!
|
||
* animate.css - https://animate.style/
|
||
* Version - 4.1.1
|
||
* Licensed under the MIT license - http://opensource.org/licenses/MIT
|
||
* https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css
|
||
* 这里做了精减，后续不再使用animate.css，因为占用体积太大，不如手写动画
|
||
* Copyright (c) 2020 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__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);
|
||
}
|
||
|
||
|
||
@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;
|
||
}
|
||
}
|
||
|
||
|
||
@-webkit-keyframes shakeX {
|
||
from,
|
||
to {
|
||
-webkit-transform: translate3d(0, 0, 0);
|
||
transform: translate3d(0, 0, 0);
|
||
}
|
||
|
||
10%,
|
||
30%,
|
||
50%,
|
||
70%,
|
||
90% {
|
||
-webkit-transform: translate3d(-10px, 0, 0);
|
||
transform: translate3d(-10px, 0, 0);
|
||
}
|
||
|
||
20%,
|
||
40%,
|
||
60%,
|
||
80% {
|
||
-webkit-transform: translate3d(10px, 0, 0);
|
||
transform: translate3d(10px, 0, 0);
|
||
}
|
||
}
|
||
@keyframes shakeX {
|
||
from,
|
||
to {
|
||
-webkit-transform: translate3d(0, 0, 0);
|
||
transform: translate3d(0, 0, 0);
|
||
}
|
||
|
||
10%,
|
||
30%,
|
||
50%,
|
||
70%,
|
||
90% {
|
||
-webkit-transform: translate3d(-10px, 0, 0);
|
||
transform: translate3d(-10px, 0, 0);
|
||
}
|
||
|
||
20%,
|
||
40%,
|
||
60%,
|
||
80% {
|
||
-webkit-transform: translate3d(10px, 0, 0);
|
||
transform: translate3d(10px, 0, 0);
|
||
}
|
||
}
|
||
.animate__shakeX {
|
||
-webkit-animation-name: shakeX;
|
||
animation-name: shakeX;
|
||
}
|
||
@-webkit-keyframes shakeY {
|
||
from,
|
||
to {
|
||
-webkit-transform: translate3d(0, 0, 0);
|
||
transform: translate3d(0, 0, 0);
|
||
}
|
||
|
||
10%,
|
||
30%,
|
||
50%,
|
||
70%,
|
||
90% {
|
||
-webkit-transform: translate3d(0, -10px, 0);
|
||
transform: translate3d(0, -10px, 0);
|
||
}
|
||
|
||
20%,
|
||
40%,
|
||
60%,
|
||
80% {
|
||
-webkit-transform: translate3d(0, 10px, 0);
|
||
transform: translate3d(0, 10px, 0);
|
||
}
|
||
}
|
||
@keyframes shakeY {
|
||
from,
|
||
to {
|
||
-webkit-transform: translate3d(0, 0, 0);
|
||
transform: translate3d(0, 0, 0);
|
||
}
|
||
|
||
10%,
|
||
30%,
|
||
50%,
|
||
70%,
|
||
90% {
|
||
-webkit-transform: translate3d(0, -10px, 0);
|
||
transform: translate3d(0, -10px, 0);
|
||
}
|
||
|
||
20%,
|
||
40%,
|
||
60%,
|
||
80% {
|
||
-webkit-transform: translate3d(0, 10px, 0);
|
||
transform: translate3d(0, 10px, 0);
|
||
}
|
||
}
|
||
.animate__shakeY {
|
||
-webkit-animation-name: shakeY;
|
||
animation-name: shakeY;
|
||
}
|
||
@-webkit-keyframes headShake {
|
||
0% {
|
||
-webkit-transform: translateX(0);
|
||
transform: translateX(0);
|
||
}
|
||
|
||
6.5% {
|
||
-webkit-transform: translateX(-6px) rotateY(-9deg);
|
||
transform: translateX(-6px) rotateY(-9deg);
|
||
}
|
||
|
||
18.5% {
|
||
-webkit-transform: translateX(5px) rotateY(7deg);
|
||
transform: translateX(5px) rotateY(7deg);
|
||
}
|
||
|
||
31.5% {
|
||
-webkit-transform: translateX(-3px) rotateY(-5deg);
|
||
transform: translateX(-3px) rotateY(-5deg);
|
||
}
|
||
|
||
43.5% {
|
||
-webkit-transform: translateX(2px) rotateY(3deg);
|
||
transform: translateX(2px) rotateY(3deg);
|
||
}
|
||
|
||
50% {
|
||
-webkit-transform: translateX(0);
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
@keyframes headShake {
|
||
0% {
|
||
-webkit-transform: translateX(0);
|
||
transform: translateX(0);
|
||
}
|
||
|
||
6.5% {
|
||
-webkit-transform: translateX(-6px) rotateY(-9deg);
|
||
transform: translateX(-6px) rotateY(-9deg);
|
||
}
|
||
|
||
18.5% {
|
||
-webkit-transform: translateX(5px) rotateY(7deg);
|
||
transform: translateX(5px) rotateY(7deg);
|
||
}
|
||
|
||
31.5% {
|
||
-webkit-transform: translateX(-3px) rotateY(-5deg);
|
||
transform: translateX(-3px) rotateY(-5deg);
|
||
}
|
||
|
||
43.5% {
|
||
-webkit-transform: translateX(2px) rotateY(3deg);
|
||
transform: translateX(2px) rotateY(3deg);
|
||
}
|
||
|
||
50% {
|
||
-webkit-transform: translateX(0);
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
.animate__headShake {
|
||
-webkit-animation-timing-function: ease-in-out;
|
||
animation-timing-function: ease-in-out;
|
||
-webkit-animation-name: headShake;
|
||
animation-name: headShake;
|
||
}
|
||
|
||
|
||
@keyframes jello {
|
||
from,
|
||
11.1%,
|
||
to {
|
||
-webkit-transform: translate3d(0, 0, 0);
|
||
transform: translate3d(0, 0, 0);
|
||
}
|
||
|
||
22.2% {
|
||
-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
|
||
transform: skewX(-12.5deg) skewY(-12.5deg);
|
||
}
|
||
|
||
33.3% {
|
||
-webkit-transform: skewX(6.25deg) skewY(6.25deg);
|
||
transform: skewX(6.25deg) skewY(6.25deg);
|
||
}
|
||
|
||
44.4% {
|
||
-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
|
||
transform: skewX(-3.125deg) skewY(-3.125deg);
|
||
}
|
||
|
||
55.5% {
|
||
-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
|
||
transform: skewX(1.5625deg) skewY(1.5625deg);
|
||
}
|
||
|
||
66.6% {
|
||
-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
|
||
transform: skewX(-0.78125deg) skewY(-0.78125deg);
|
||
}
|
||
|
||
77.7% {
|
||
-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
|
||
transform: skewX(0.390625deg) skewY(0.390625deg);
|
||
}
|
||
|
||
88.8% {
|
||
-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
|
||
transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
|
||
}
|
||
}
|
||
.animate__jello {
|
||
-webkit-animation-name: jello;
|
||
animation-name: jello;
|
||
-webkit-transform-origin: center;
|
||
transform-origin: center;
|
||
}
|
||
|
||
|
||
|
||
@-webkit-keyframes bounceInRight {
|
||
from,
|
||
60%,
|
||
75%,
|
||
90%,
|
||
to {
|
||
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||
}
|
||
|
||
from {
|
||
opacity: 0;
|
||
-webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
|
||
transform: translate3d(3000px, 0, 0) scaleX(3);
|
||
}
|
||
|
||
60% {
|
||
opacity: 1;
|
||
-webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
|
||
transform: translate3d(-25px, 0, 0) scaleX(1);
|
||
}
|
||
|
||
75% {
|
||
-webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
|
||
transform: translate3d(10px, 0, 0) scaleX(0.98);
|
||
}
|
||
|
||
90% {
|
||
-webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
|
||
transform: translate3d(-5px, 0, 0) scaleX(0.995);
|
||
}
|
||
|
||
to {
|
||
-webkit-transform: translate3d(0, 0, 0);
|
||
transform: translate3d(0, 0, 0);
|
||
}
|
||
}
|
||
@keyframes bounceInRight {
|
||
from,
|
||
60%,
|
||
75%,
|
||
90%,
|
||
to {
|
||
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||
}
|
||
|
||
from {
|
||
opacity: 0;
|
||
-webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
|
||
transform: translate3d(3000px, 0, 0) scaleX(3);
|
||
}
|
||
|
||
60% {
|
||
opacity: 1;
|
||
-webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
|
||
transform: translate3d(-25px, 0, 0) scaleX(1);
|
||
}
|
||
|
||
75% {
|
||
-webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
|
||
transform: translate3d(10px, 0, 0) scaleX(0.98);
|
||
}
|
||
|
||
90% {
|
||
-webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
|
||
transform: translate3d(-5px, 0, 0) scaleX(0.995);
|
||
}
|
||
|
||
to {
|
||
-webkit-transform: translate3d(0, 0, 0);
|
||
transform: translate3d(0, 0, 0);
|
||
}
|
||
}
|
||
.animate__bounceInRight {
|
||
-webkit-animation-name: bounceInRight;
|
||
animation-name: bounceInRight;
|
||
}
|
||
|
||
|
||
/* Fading entrances */
|
||
@-webkit-keyframes fadeIn {
|
||
from {
|
||
opacity: 0;
|
||
}
|
||
|
||
to {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
@keyframes fadeIn {
|
||
from {
|
||
opacity: 0;
|
||
}
|
||
|
||
to {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
.animate__fadeIn {
|
||
-webkit-animation-name: fadeIn;
|
||
animation-name: fadeIn;
|
||
}
|
||
|
||
|
||
/* Fading exits */
|
||
/* 删除 */
|
||
|
||
/* Flippers */
|
||
/* 删除 */
|
||
|
||
/* Lightspeed */
|
||
/* 删除 */
|
||
|
||
/* Rotating exits */
|
||
/* 删除 */
|
||
|
||
/* Zooming entrances */
|
||
/* 删除 */
|
||
|
||
/* Sliding entrances */
|
||
|
||
@-webkit-keyframes slideInLeft {
|
||
from {
|
||
-webkit-transform: translate3d(-100%, 0, 0);
|
||
transform: translate3d(-100%, 0, 0);
|
||
visibility: visible;
|
||
}
|
||
|
||
to {
|
||
-webkit-transform: translate3d(0, 0, 0);
|
||
transform: translate3d(0, 0, 0);
|
||
}
|
||
}
|
||
@keyframes slideInLeft {
|
||
from {
|
||
-webkit-transform: translate3d(-100%, 0, 0);
|
||
transform: translate3d(-100%, 0, 0);
|
||
visibility: visible;
|
||
}
|
||
|
||
to {
|
||
-webkit-transform: translate3d(0, 0, 0);
|
||
transform: translate3d(0, 0, 0);
|
||
}
|
||
}
|
||
.animate__slideInLeft {
|
||
-webkit-animation-name: slideInLeft;
|
||
animation-name: slideInLeft;
|
||
}
|
||
@-webkit-keyframes slideInRight {
|
||
from {
|
||
-webkit-transform: translate3d(100%, 0, 0);
|
||
transform: translate3d(100%, 0, 0);
|
||
visibility: visible;
|
||
}
|
||
|
||
to {
|
||
-webkit-transform: translate3d(0, 0, 0);
|
||
transform: translate3d(0, 0, 0);
|
||
}
|
||
}
|
||
@keyframes slideInRight {
|
||
from {
|
||
-webkit-transform: translate3d(100%, 0, 0);
|
||
transform: translate3d(100%, 0, 0);
|
||
visibility: visible;
|
||
}
|
||
|
||
to {
|
||
-webkit-transform: translate3d(0, 0, 0);
|
||
transform: translate3d(0, 0, 0);
|
||
}
|
||
}
|
||
.animate__slideInRight {
|
||
-webkit-animation-name: slideInRight;
|
||
animation-name: slideInRight;
|
||
}
|
||
|
||
|
||
@keyframes slideOutLeft {
|
||
from {
|
||
-webkit-transform: translate3d(0, 0, 0);
|
||
transform: translate3d(0, 0, 0);
|
||
}
|
||
|
||
to {
|
||
visibility: hidden;
|
||
-webkit-transform: translate3d(-100%, 0, 0);
|
||
transform: translate3d(-100%, 0, 0);
|
||
}
|
||
}
|
||
.animate__slideOutLeft {
|
||
-webkit-animation-name: slideOutLeft;
|
||
animation-name: slideOutLeft;
|
||
}
|
||
@-webkit-keyframes slideOutRight {
|
||
from {
|
||
-webkit-transform: translate3d(0, 0, 0);
|
||
transform: translate3d(0, 0, 0);
|
||
}
|
||
|
||
to {
|
||
visibility: hidden;
|
||
-webkit-transform: translate3d(100%, 0, 0);
|
||
transform: translate3d(100%, 0, 0);
|
||
}
|
||
}
|
||
@keyframes slideOutRight {
|
||
from {
|
||
-webkit-transform: translate3d(0, 0, 0);
|
||
transform: translate3d(0, 0, 0);
|
||
}
|
||
|
||
to {
|
||
visibility: hidden;
|
||
-webkit-transform: translate3d(100%, 0, 0);
|
||
transform: translate3d(100%, 0, 0);
|
||
}
|
||
}
|
||
.animate__slideOutRight {
|
||
-webkit-animation-name: slideOutRight;
|
||
animation-name: slideOutRight;
|
||
}
|