.scale-up-center {
animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
@keyframes scale-up-center {
0% {
transform: scale(0.5);
}
100% {
transform: scale(1);
}
}
.scale-up-top {
animation: scale-up-top 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) ;
}
@keyframes scale-up-top {
0% {
transform: scale(0.5);
transform-origin: 50% 0%;
}
100% {
transform: scale(1);
transform-origin: 50% 0%;
}
}
.scale-up-bottom {
animation: scale-up-bottom 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) ;
}
@keyframes scale-up-bottom {
0% {
transform: scale(0.5);
transform-origin: 50% 100%;
}
100% {
transform: scale(1);
transform-origin: 50% 100%;
}
}
.scale-up-hor-center {
animation: scale-up-hor-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
@keyframes scale-up-hor-center {
0% {
transform: scaleX(0.4);
}
100% {
transform: scaleX(1);
}
}
.scale-up-ver-center {
animation: scale-up-ver-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
@keyframes scale-up-ver-center {
0% {
transform: scaleY(0.4);
}
100% {
transform: scaleY(1);
}
}
.scale-ro-right {
animation: scale-ro-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes scale-ro-right {
0% {
transform: scaleX(0);
transform-origin: 0% 0%;
opacity: 1;
}
100% {
transform: scaleX(1);
transform-origin: 0% 0%;
opacity: 1;
}
}
.scale-to-left {
animation: scale-to-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes scale-to-left {
0% {
transform: scaleX(0);
transform-origin: 100% 100%;
opacity: 1;
}
100% {
transform: scaleX(1);
transform-origin: 100% 100%;
opacity: 1;
}
}
.scale-to-top {
animation: scale-to-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes scale-to-top {
0% {
transform: scaleY(0);
transform-origin: 0% 100%;
opacity: 1;
}
100% {
transform: scaleY(1);
transform-origin: 0% 100%;
opacity: 1;
}
}
.scale-to-bottom {
animation: scale-to-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes scale-to-bottom {
0% {
transform: scaleY(0);
transform-origin: 100% 0%;
opacity: 1;
}
100% {
transform: scaleY(1);
transform-origin: 100% 0%;
opacity: 1;
}
}
.rotate {
animation: rotate 3s infinite linear;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.rotateTop {
animation: rotate-top 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) ;
}
@keyframes rotate-top {
0% {
transform: rotate(0);
transform-origin: top;
}
100% {
transform: rotate(360deg);
transform-origin: top;
}
}
.rotateTopRight {
animation: rotate-tr 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}
@keyframes rotate-tr {
0% {
transform: rotate(0);
transform-origin: top right;
}
100% {
transform: rotate(360deg);
transform-origin: top right;
}
}
.rotateRight {
animation: rotate-right 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}
@keyframes rotate-right {
0% {
transform: rotate(0);
transform-origin: right;
}
100% {
transform: rotate(360deg);
transform-origin: right;
}
}
.rotateBottomRight {
animation: rotate-br 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}
@keyframes rotate-br {
0% {
transform: rotate(0);
transform-origin: bottom right;
}
100% {
transform: rotate(360deg);
transform-origin: bottom right;
}
}
.rotateBottom {
animation: rotate-bottom 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}
@keyframes rotate-bottom {
0% {
transform: rotate(0);
transform-origin: bottom;
}
100% {
transform: rotate(360deg);
transform-origin: bottom;
}
}
.rotateLeft {
animation: rotate-left 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}
@keyframes rotate-left {
0% {
transform: rotate(0);
transform-origin: left;
}
100% {
transform: rotate(360deg);
transform-origin: left;
}
}
.rotateLeftTop {
animation: rotate-tl 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}
@keyframes rotate-tl {
0% {
transform: rotate(0);
transform-origin: top left;
}
100% {
transform: rotate(360deg);
transform-origin: top left;
}
}
.rotateLeftBottom {
animation: rotate-lb 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}
@keyframes rotate-lb {
0% {
transform: rotate(0);
transform-origin: bottom left;
}
100% {
transform: rotate(360deg);
transform-origin: bottom left;
}
}
.rotateHorizontal {
animation: rotate-hor-center 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}
@keyframes rotate-hor-center {
0% {
transform: rotateX(0);
}
100% {
transform: rotateX(-360deg);
}
}
.rotateVertical {
animation: rotate-ver-center 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}
@keyframes rotate-ver-center {
0% {
transform: rotateY(0);
}
100% {
transform: rotateY(360deg);
}
}
.rotateTopX {
animation: animation: rotate-hor-top 0.5s cubic-bezier(0.645, 0.045, 0.355, 1.000) both;
}
@keyframes rotate-hor-top {
0% {
transform: rotateX(0);
transform-origin: top;
}
100% {
transform: rotateX(-360deg);
transform-origin: top;
}
}
.rotateBottomX {
animation: rotate-bottom-x 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}
@keyframes rotate-bottom-x {
0% {
transform: rotateX(0);
transform-origin: bottom;
}
100% {
transform: rotateX(-360deg);
transform-origin: bottom;
}
}
.rotateLeftX {
animation: rotate-left-x 0.5s cubic-bezier(0.645, 0.045, 0.355, 1.000) both;
}
@keyframes rotate-left-x {
0% {
transform: rotateY(0);
transform-origin: left;
}
100% {
transform: rotateY(360deg);
transform-origin: left;
}
}
.rotateRightX {
animation: rotate-right-x 0.5s cubic-bezier(0.645, 0.045, 0.355, 1.000) both;
}
@keyframes rotate-right-x {
0% {
transform: rotateY(0);
transform-origin: right;
}
100% {
transform: rotateY(-360deg);
transform-origin: right;
}
}
.rotateDiagonal {
animation: rotate-diagonal 0.5s cubic-bezier(0.645, 0.045, 0.355, 1.000) both;
}
@keyframes rotate-diagonal {
0% {
transform: rotate3d(1, 1, 0, 0deg);
}
50% {
transform: rotate3d(1, 1, 0, -180deg);
}
100% {
transform: rotate3d(1, 1, 0, -360deg);
}
}
.rotateScaleUp {
animation: rotate-scale-up 0.65s linear both;
}
@keyframes rotate-scale-up {
0% {
transform: scale(1) rotateZ(0);
}
50% {
transform: scale(2) rotateZ(180deg);
}
100% {
transform: scale(1) rotateZ(360deg);
}
}
.rotateScaleDown {
animation: rotate-scale-down 0.65s linear both;
}
@keyframes rotate-scale-down {
0% {
transform: scale(1) rotateZ(0);
}
50% {
transform: scale(0.5) rotateZ(180deg);
}
100% {
transform: scale(1) rotateZ(360deg);
}
}
.rotateScaleUpHor {
animation: rotate-scale-up-hor 0.65s linear both;
}
@keyframes rotate-scale-up-hor {
0% {
transform: scale(1) rotateX(0);
}
50% {
transform: scale(2) rotateX(-180deg);
}
100% {
transform: scale(1) rotateX(-360deg);
}
}
.rotateScaleDownHor {
animation: rotate-scale-down-hor 0.65s linear both;
}
@keyframes rotate-scale-down-hor {
0% {
transform: scale(1) rotateX(0);
}
50% {
transform: scale(0.5) rotateX(-180deg);
}
100% {
transform: scale(1) rotateX(-360deg);
}
}
.rotateScaleUpVer {
animation: rotate-scale-up-ver 0.65s linear both;
}
@keyframes rotate-scale-up-ver {
0% {
transform: scale(1) rotateY(0);
}
50% {
transform: scale(2) rotateY(180deg);
}
100% {
transform: scale(1) rotateY(360deg);
}
}
.rotateScaleDownVer {
animation: rotate-scale-down-ver 0.65s linear both;
}
@keyframes rotate-scale-down-ver {
0% {
transform: scale(1) rotateY(0);
}
50% {
transform: scale(0.5) rotateY(180deg);
}
100% {
transform: scale(1) rotateY(360deg);
}
}
.rotateScaleUpDiag {
animation: rotate-scale-up-diag-1 0.7s linear both;
}
@keyframes rotate-scale-up-diag-1 {
0% {
transform: scale(1) rotate3d(1, 1, 0, 0deg);
}
50% {
transform: scale(2) rotate3d(1, 1, 0, -180deg);
}
100% {
transform: scale(1) rotate3d(1, 1, 0, -360deg);
}
}
.slitInVertical {
animation: slit-in-vertical 0.45s ease-out both;
}
@keyframes slit-in-vertical {
0% {
transform: translateZ(-800px) rotateY(90deg);
opacity: 0;
}
54% {
transform: translateZ(-160px) rotateY(87deg);
opacity: 1;
}
100% {
transform: translateZ(0) rotateY(0);
}
}
.slitInHorizontal {
animation: slit-in-horizontal 0.45s ease-out both;
}
@keyframes slit-in-horizontal {
0% {
transform: translateZ(-800px) rotateX(90deg);
opacity: 0;
}
54% {
transform: translateZ(-160px) rotateX(87deg);
opacity: 1;
}
100% {
transform: translateZ(0) rotateX(0);
}
}
.slitInDiagonal {
animation: slit-in-diagonal-1 0.45s ease-out both;
}
@keyframes slit-in-diagonal-1 {
0% {
transform: translateZ(-800px) rotate3d(1, 1, 0, 90deg);
animation-timing-function: ease-in;
opacity: 0;
}
54% {
transform: translateZ(-160px) rotate3d(1, 1, 0, 87deg);
animation-timing-function: ease-in-out;
opacity: 1;
}
100% {
transform: translateZ(0) rotate3d(1, 1, 0, 0);
animation-timing-function: ease-out;
}
}
.slitInDiagonar {
animation: slit-in-diagonal-2 0.45s ease-out both;
}
@keyframes slit-in-diagonal-2 {
0% {
transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg);
animation-timing-function: ease-in;
opacity: 0;
}
54% {
transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg);
animation-timing-function: ease-in-out;
opacity: 1;
}
100% {
transform: translateZ(0) rotate3d(-1, 1, 0, 0);
animation-timing-function: ease-out;
}
}
.slideInTop {
animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes slide-in-top {
0% {
transform: translateY(-1000px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
.slideInTopRight {
animation: slide-in-tr 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes slide-in-tr {
0% {
transform: translateY(-1000px) translateX(1000px);
opacity: 0;
}
100% {
transform: translateY(0) translateX(0);
opacity: 1;
}
}
.slideInRight {
animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes slide-in-right {
0% {
transform: translateX(1000px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
.slideInBottom {
animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes slide-in-bottom {
0% {
transform: translateY(1000px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
.animation-display {
perspective: 1400px;//景深视角 需要给自己的动画元素[的父元素]添加这个属性，否则动画可能不生效
}
.slideInFwdCenter {
animation: slide-in-fwd-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
transform-style: preserve-3d;
}
@keyframes slide-in-fwd-center {
0% {
transform: translateZ(-1400px);
opacity: 0;
}
100% {
transform: translateZ(0);
opacity: 1;
}
}
.animation-display {
perspective: 1400px;//景深视角 需要给自己的动画元素[的父元素]添加这个属性，否则动画可能不生效
}
.slideInFwdTop {
animation: slide-in-fwd-top 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
transform-style: preserve-3d;
}
@keyframes slide-in-fwd-top {
0% {
transform: translateZ(-1400px) translateY(-800px);
opacity: 0;
}
100% {
transform: translateZ(0) translateY(0);
opacity: 1;
}
}
.animation-display {
perspective: 1400px;//景深视角 需要给自己的动画元素[的父元素]添加这个属性，否则动画可能不生效
}
.slideInFwdTopRight {
animation: slide-in-fwd-top-right 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
transform-style: preserve-3d;
}
@keyframes slide-in-fwd-tr {
0% {
transform: translateZ(-1400px) translateY(-800px) translateX(1000px);
opacity: 0;
}
100% {
transform: translateZ(0) translateY(0) translateX(0);
opacity: 1;
}
}
.animation-display {
perspective: 1400px;//景深视角 需要给自己的动画元素[的父元素]添加这个属性，否则动画可能不生效
}
.slideInFwdBottomRight {
animation: slide-in-fwd-br 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
transform-style: preserve-3d;
}
@keyframes slide-in-fwd-br {
0% {
transform: translateZ(-1400px) translateY(800px) translateX(1000px);
opacity: 0;
}
100% {
transform: translateZ(0) translateY(0) translateX(0);
opacity: 1;
}
}
.animation-display {
perspective: 1400px;//景深视角 需要给自己的动画元素[的父元素]添加这个属性，否则动画可能不生效
}
.slideInFwdBottom {
animation: slide-in-fwd-bottom 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
transform-style: preserve-3d;
}
@keyframes slide-in-fwd-bottom {
0% {
transform: translateZ(-1400px) translateY(800px);
opacity: 0;
}
100% {
transform: translateZ(0) translateY(0);
opacity: 1;
}
}
.animation-display {
perspective: 1400px;//景深视角 需要给自己的动画元素[的父元素]添加这个属性，否则动画可能不生效
}
.slideInFwdBottomLeft {
animation: slide-in-fwd-bl 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
transform-style: preserve-3d;
}
@keyframes slide-in-fwd-bl {
0% {
transform: translateZ(-1400px) translateY(800px) translateX(-1000px);
opacity: 0;
}
100% {
transform: translateZ(0) translateY(0) translateX(0);
opacity: 1;
}
}
.animation-display {
perspective: 1400px;//景深视角 需要给自己的动画元素[的父元素]添加这个属性，否则动画可能不生效
}
.slideInFwdTopLeft {
animation: slide-in-fwd-tl 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
transform-style: preserve-3d;
}
@keyframes slide-in-fwd-tl {
0% {
transform: translateZ(-1400px) translateY(-800px) translateX(-1000px);
opacity: 0;
}
100% {
transform: translateZ(0) translateY(0) translateX(0);
opacity: 1;
}
}
.animation-display {
perspective: 1400px;//景深视角 需要给自己的动画元素[的父元素]添加这个属性，否则动画可能不生效
}
.slideInFwdLeft {
animation: slide-in-fwd-left 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
transform-style: preserve-3d;
}
@keyframes slide-in-fwd-left {
0% {
transform: translateZ(-1400px) translateX(-1000px);
opacity: 0;
}
100% {
transform: translateZ(0) translateX(0);
opacity: 1;
}
}
.animation-display {
perspective: 1400px;//景深视角 需要给自己的动画元素[的父元素]添加这个属性，否则动画可能不生效
}
.slideInFwdRight {
animation: slide-in-fwd-right 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
transform-style: preserve-3d;
}
@keyframes slide-in-fwd-right {
0% {
transform: translateZ(-1400px) translateX(1000px);
opacity: 0;
}
100% {
transform: translateZ(0) translateX(0);
opacity: 1;
}
}
.slideInBlurredTop {
animation: slide-in-blurred-top 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}
@keyframes slide-in-blurred-top {
0% {
transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
transform-origin: 50% 0%;
filter: blur(40px);
opacity: 0;
}
100% {
transform: translateY(0) scaleY(1) scaleX(1);
transform-origin: 50% 50%;
filter: blur(0);
opacity: 1;
}
}
.slideInBlurredTopRight {
animation: slide-in-blurred-tr 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}
@keyframes slide-in-blurred-tr {
0% {
transform: translate(1000px, -1000px) skew(-80deg, -10deg);
transform-origin: 0% 0%;
filter: blur(40px);
opacity: 0;
}
100% {
transform: translate(0, 0) skew(0deg, 0deg);
transform-origin: 50% 50%;
filter: blur(0);
opacity: 1;
}
}
.slideInBlurredRight {
animation: slide-in-blurred-right 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}
@keyframes slide-in-blurred-right {
0% {
transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
transform-origin: 0% 50%;
filter: blur(40px);
opacity: 0;
}
100% {
transform: translateX(0) scaleY(1) scaleX(1);
transform-origin: 50% 50%;
filter: blur(0);
opacity: 1;
}
}
.slideInBlurredBottom {
animation: slide-in-blurred-bottom 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}
@keyframes slide-in-blurred-bottom {
0% {
transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
transform-origin: 50% 100%;
filter: blur(40px);
opacity: 0;
}
100% {
transform: translateY(0) scaleY(1) scaleX(1);
transform-origin: 50% 50%;
filter: blur(0);
opacity: 1;
}
}
.slideInBlurredBottomRight {
animation: slide-in-blurred-bottom 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}
@keyframes slide-in-blurred-bottom {
0% {
transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
transform-origin: 50% 100%;
filter: blur(40px);
opacity: 0;
}
100% {
transform: translateY(0) scaleY(1) scaleX(1);
transform-origin: 50% 50%;
filter: blur(0);
opacity: 1;
}
}
.slideInBlurredBottomLeft {
animation: slide-in-blurred-bl 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}
@keyframes slide-in-blurred-bl {
0% {
transform: translate(-1000px, 1000px) skew(-80deg, -10deg);
transform-origin: 100% 100%;
filter: blur(40px);
opacity: 0;
}
100% {
transform: translate(0, 0) skew(0deg, 0deg);
transform-origin: 50% 50%;
filter: blur(0);
opacity: 1;
}
}
.slideInEllipticTop {
animation: slide-in-elliptic-top-fwd 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes slide-in-elliptic-top-fwd {
0% {
transform: translateY(-600px) rotateX(-30deg) scale(0);
transform-origin: 50% 100%;
opacity: 0;
}
100% {
transform: translateY(0) rotateX(0) scale(1);
transform-origin: 50% 1400px;
opacity: 1;
}
}
.slideInEllipticRight {
animation: slide-in-elliptic-right-fwd 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes slide-in-elliptic-right-fwd {
0% {
transform: translateX(800px) rotateY(-30deg) scale(0);
transform-origin: -100% 50%;
opacity: 0;
}
100% {
transform: translateX(0) rotateY(0) scale(1);
transform-origin: -1800px 50%;
opacity: 1;
}
}
.slideInEllipticBottom {
animation: slide-in-elliptic-bottom-fwd 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes slide-in-elliptic-bottom-fwd {
0% {
transform: translateY(600px) rotateX(30deg) scale(0);
transform-origin: 50% 100%;
opacity: 0;
}
100% {
transform: translateY(0) rotateX(0) scale(1);
transform-origin: 50% -1400px;
opacity: 1;
}
}
.slideInEllipticLeft {
animation: slide-in-elliptic-left-fwd 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes slide-in-elliptic-left-fwd {
0% {
transform: translateX(-800px) rotateY(30deg) scale(0);
transform-origin: -100% 50%;
opacity: 0;
}
100% {
transform: translateX(0) rotateY(0) scale(1);
transform-origin: 1800px 50%;
opacity: 1;
}
}
.slideInBounceTop {
animation: bounce-in-top 1.1s both;
}
@keyframes bounce-in-top {
0% {
transform: translateY(-500px);
animation-timing-function: ease-in;
opacity: 0;
}
38% {
transform: translateY(0);
animation-timing-function: ease-out;
opacity: 1;
}
55% {
transform: translateY(-65px);
animation-timing-function: ease-in;
}
72% {
transform: translateY(0);
animation-timing-function: ease-out;
}
81% {
transform: translateY(-28px);
animation-timing-function: ease-in;
}
90% {
transform: translateY(0);
animation-timing-function: ease-out;
}
95% {
transform: translateY(-8px);
animation-timing-function: ease-in;
}
100% {
transform: translateY(0);
animation-timing-function: ease-out;
}
}
.slideInBounceRight {
animation: bounce-in-right 1.1s both;
}
@keyframes bounce-in-right {
0% {
transform: translateX(600px);
animation-timing-function: ease-in;
opacity: 0;
}
38% {
transform: translateX(0);
animation-timing-function: ease-out;
opacity: 1;
}
55% {
transform: translateX(68px);
animation-timing-function: ease-in;
}
72% {
transform: translateX(0);
animation-timing-function: ease-out;
}
81% {
transform: translateX(32px);
animation-timing-function: ease-in;
}
90% {
transform: translateX(0);
animation-timing-function: ease-out;
}
95% {
transform: translateX(8px);
animation-timing-function: ease-in;
}
100% {
transform: translateX(0);
animation-timing-function: ease-out;
}
}
.slideInBounceBottom {
animation: bounce-in-bottom 1.1s both;
}
@keyframes bounce-in-bottom {
0% {
transform: translateY(500px);
animation-timing-function: ease-in;
opacity: 0;
}
38% {
transform: translateY(0);
animation-timing-function: ease-out;
opacity: 1;
}
55% {
transform: translateY(65px);
animation-timing-function: ease-in;
}
72% {
transform: translateY(0);
animation-timing-function: ease-out;
}
81% {
transform: translateY(28px);
animation-timing-function: ease-in;
}
90% {
transform: translateY(0);
animation-timing-function: ease-out;
}
95% {
transform: translateY(8px);
animation-timing-function: ease-in;
}
100% {
transform: translateY(0);
animation-timing-function: ease-out;
}
}
.slideInBounceLeft {
animation: bounce-in-left 1.1s both;
}
@keyframes bounce-in-left {
0% {
transform: translateX(-600px);
animation-timing-function: ease-in;
opacity: 0;
}
38% {
transform: translateX(0);
animation-timing-function: ease-out;
opacity: 1;
}
55% {
transform: translateX(-68px);
animation-timing-function: ease-in;
}
72% {
transform: translateX(0);
animation-timing-function: ease-out;
}
81% {
transform: translateX(-28px);
animation-timing-function: ease-in;
}
90% {
transform: translateX(0);
animation-timing-function: ease-out;
}
95% {
transform: translateX(-8px);
animation-timing-function: ease-in;
}
100% {
transform: translateX(0);
animation-timing-function: ease-out;
}
}
.slideInBounceFwd {
animation: bounce-in-fwd 1.1s both;
}
@keyframes bounce-in-fwd {
0% {
transform: scale(0);
animation-timing-function: ease-in;
opacity: 0;
}
38% {
transform: scale(1);
animation-timing-function: ease-out;
opacity: 1;
}
55% {
transform: scale(0.7);
animation-timing-function: ease-in;
}
72% {
transform: scale(1);
animation-timing-function: ease-out;
}
81% {
transform: scale(0.84);
animation-timing-function: ease-in;
}
89% {
transform: scale(1);
animation-timing-function: ease-out;
}
95% {
transform: scale(0.95);
animation-timing-function: ease-in;
}
100% {
transform: scale(1);
animation-timing-function: ease-out;
}
}
.slideInBounceBck {
animation: bounce-in-bck 1.1s both;
}
@keyframes bounce-in-bck {
0% {
transform: scale(7);
animation-timing-function: ease-in;
opacity: 0;
}
38% {
transform: scale(1);
animation-timing-function: ease-out;
opacity: 1;
}
55% {
transform: scale(1.5);
animation-timing-function: ease-in;
}
72% {
transform: scale(1);
animation-timing-function: ease-out;
}
81% {
transform: scale(1.24);
animation-timing-function: ease-in;
}
89% {
transform: scale(1);
animation-timing-function: ease-out;
}
95% {
transform: scale(1.04);
animation-timing-function: ease-in;
}
100% {
transform: scale(1);
animation-timing-function: ease-out;
}
}
.rollInLeft {
animation: roll-in-left 0.6s ease-out both;
}
@keyframes roll-in-left {
0% {
transform: translateX(-800px) rotate(-540deg);
opacity: 0;
}
100% {
transform: translateX(0) rotate(0deg);
opacity: 1;
}
}
.rollInRight {
animation: roll-in-right 0.6s ease-out both;
}
@keyframes roll-in-right {
0% {
transform: translateX(800px) rotate(540deg);
opacity: 0;
}
100% {
transform: translateX(0) rotate(0deg);
opacity: 1;
}
}
.rollInTop {
animation: roll-in-top 0.6s ease-out both;
}
@keyframes roll-in-top {
0% {
transform: translateY(-800px) rotate(-540deg);
opacity: 0;
}
100% {
transform: translateY(0) rotate(0deg);
opacity: 1;
}
}
.rollInBottom {
animation: roll-in-bottom 0.6s ease-out both;
}
@keyframes roll-in-bottom {
0% {
transform: translateY(800px) rotate(540deg);
opacity: 0;
}
100% {
transform: translateY(0) rotate(0deg);
opacity: 1;
}
}
.rollInLeftBlurred {
animation: roll-in-blurred-left 0.65s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}
@keyframes roll-in-blurred-left {
0% {
transform: translateX(-1000px) rotate(-720deg);
filter: blur(50px);
opacity: 0;
}
100% {
transform: translateX(0) rotate(0deg);
filter: blur(0);
opacity: 1;
}
}
.rollInRightBlurred {
animation: roll-in-blurred-right 0.65s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}
@keyframes roll-in-blurred-right {
0% {
transform: translateX(1000px) rotate(720deg);
filter: blur(50px);
opacity: 0;
}
100% {
transform: translateX(0) rotate(0deg);
filter: blur(0);
opacity: 1;
}
}
.rollInTopBlurred {
animation: roll-in-blurred-top 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}
@keyframes roll-in-blurred-top {
0% {
transform: translateY(-800px) rotate(-720deg);
filter: blur(50px);
opacity: 0;
}
100% {
transform: translateY(0) rotate(0deg);
filter: blur(0);
opacity: 1;
}
}
.rollInBottomBlurred {
animation: roll-in-blurred-bottom 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}
@keyframes roll-in-blurred-bottom {
0% {
transform: translateY(800px) rotate(720deg);
filter: blur(50px);
opacity: 0;
}
100% {
transform: translateY(0) rotate(0deg);
opacity: 1;
}
}
.tiltInTop1 {
animation: tilt-in-top-1 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes tilt-in-top-1 {
0% {
transform: rotateY(30deg) translateY(-300px) skewY(-30deg);
opacity: 0;
}
100% {
transform: rotateY(0deg) translateY(0) skewY(0deg);
opacity: 1;
}
}
.tiltInTop2 {
animation: tilt-in-top-2 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes tilt-in-top-2 {
0% {
transform: rotateY(-30deg) translateY(-300px) skewY(30deg);
opacity: 0;
}
100% {
transform: rotateY(0deg) translateY(0) skewY(0deg);
opacity: 1;
}
}
.tiltInBottom1 {
animation: tilt-in-bottom-1 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes tilt-in-bottom-1 {
0% {
transform: rotateY(30deg) translateY(300px) skewY(-30deg);
opacity: 0;
}
100% {
transform: rotateY(0deg) translateY(0) skewY(0deg);
opacity: 1;
}
}
.tiltInBottom2 {
animation: tilt-in-bottom-2 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes tilt-in-bottom-2 {
0% {
transform: rotateY(-30deg) translateY(300px) skewY(30deg);
opacity: 0;
}
100% {
transform: rotateY(0deg) translateY(0) skewY(0deg);
opacity: 1;
}
}
.tiltInFwdTopRight {
animation: tilt-in-fwd-tr 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes tilt-in-fwd-tr {
0% {
transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
opacity: 0;
}
100% {
transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
opacity: 1;
}
}
.tiltInFwdBottomRight {
animation: tilt-in-fwd-br 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes tilt-in-fwd-br {
0% {
transform: rotateY(20deg) rotateX(-35deg) translate(300px, 300px) skew(35deg, -10deg);
opacity: 0;
}
100% {
transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
opacity: 1;
}
}
.tiltInFwdTopLeft {
animation: tilt-in-fwd-tl 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes tilt-in-fwd-tl {
0% {
transform: rotateY(-20deg) rotateX(35deg) translate(-300px, -300px) skew(35deg, -10deg);
opacity: 0;
}
100% {
transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
opacity: 1;
}
}
.tiltInFwdBottomLeft {
animation: tilt-in-fwd-bl 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes tilt-in-fwd-bl {
0% {
transform: rotateY(-20deg) rotateX(-35deg) translate(-300px, 300px) skew(-35deg, 10deg);
opacity: 0;
}
100% {
transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
opacity: 1;
}
}
.fadeInNormal {
animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.father-box {
perspective: 1000px; /* 父盒子需要启用3D变换上下文，另外父盒子宽度和子盒子差距不能太大，否则会变形 */
}
.fadeInFwd {
animation: fade-in-fwd 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
@keyframes fade-in-fwd {
0% {
transform: translateZ(-80px);
opacity: 0;
}
100% {
transform: translateZ(0);
opacity: 1;
}
}
.father-box {
perspective: 1000px; /* 父盒子需要启用3D变换上下文，另外父盒子宽度和子盒子差距不能太大，否则会变形 */
}
.fadeInBck {
animation: fade-in-bck 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both
}
@keyframes fade-in-bck {
0% {
transform: translateZ(80px);
opacity: 0;
}
100% {
transform: translateZ(0);
opacity: 1;
}
}
.fadeInTop {
animation: fade-in-top 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
@keyframes fade-in-top {
0% {
transform: translateY(-50px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
.fadeInBottom {
animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
@keyframes fade-in-bottom {
0% {
transform: translateY(50px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
.fadeInLeft {
animation: fade-in-left 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
@keyframes fade-in-left {
0% {
transform: translateX(-50px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
.fadeInRight {
animation: fade-in-right 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
@keyframes fade-in-right {
0% {
transform: translateX(50px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
.scaleOutCenter {
animation: scale-out-center 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
@keyframes scale-out-center {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0);
opacity: 1;
}
}
.scaleOutTop {
animation: scale-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
@keyframes scale-out-top {
0% {
transform: scale(1);
transform-origin: 50% 0%;
opacity: 1;
}
100% {
transform: scale(0);
transform-origin: 50% 0%;
opacity: 1;
}
}
.scaleOutBottom {
animation: scale-out-bottom 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
@keyframes scale-out-bottom {
0% {
transform: scale(1);
transform-origin: 50% 100%;
opacity: 1;
}
100% {
transform: scale(0);
transform-origin: 50% 100%;
opacity: 1;
}
}
.scaleOutLeft {
animation: scale-out-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
@keyframes scale-out-left {
0% {
transform: scale(1);
transform-origin: 0% 50%;
opacity: 1;
}
100% {
transform: scale(0);
transform-origin: 0% 50%;
opacity: 1;
}
}
.scaleOutRight {
animation: scale-out-right 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
@keyframes scale-out-right {
0% {
transform: scale(1);
transform-origin: 100% 50%;
opacity: 1;
}
100% {
transform: scale(0);
transform-origin: 100% 50%;
opacity: 1;
}
}
.scaleOutHorizontal {
animation: scale-out-horizontal 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
@keyframes scale-out-horizontal {
0% {
transform: scaleX(1);
opacity: 1;
}
100% {
transform: scaleX(0);
opacity: 1;
}
}
