nuxt/aerwen_web_nuxt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
13e74eef49
aerwen_web_nuxt/assets/css/root/animation.scss
nuxt_Team 13e74eef49 Initial commit
2023-06-28 19:02:53 +08:00

943 lines
24 KiB
SCSS
Raw Blame History

//animation.scss
/*动画从右往左进入效果*/
.slide-in-blurred-right {
-webkit-animation: slide-in-blurred-right 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
animation: slide-in-blurred-right 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}
@-webkit-keyframes slide-in-blurred-right {
0% {
-webkit-transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-filter: blur(40px);
filter: blur(40px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0) scaleY(1) scaleX(1);
transform: translateX(0) scaleY(1) scaleX(1);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-filter: blur(0);
filter: blur(0);
opacity: 1;
}
}
@keyframes slide-in-blurred-right {
0% {
-webkit-transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-filter: blur(40px);
filter: blur(40px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0) scaleY(1) scaleX(1);
transform: translateX(0) scaleY(1) scaleX(1);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-filter: blur(0);
filter: blur(0);
opacity: 1;
}
/*动画从左往右出去效果*/
}
.slide-out-blurred-right {
-webkit-animation: slide-out-blurred-right 0.45s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
animation: slide-out-blurred-right 0.45s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}
/* ----------------------------------------------
* Generated by Animista on 2023-3-8 14:24:8
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation slide-out-blurred-right
* ----------------------------------------
*/
@-webkit-keyframes slide-out-blurred-right {
0% {
-webkit-transform: translateX(0) scaleY(1) scaleX(1);
transform: translateX(0) scaleY(1) scaleX(1);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-filter: blur(0);
filter: blur(0);
opacity: 1;
}
100% {
-webkit-transform: translateX(1000px) scaleX(2) scaleY(0.2);
transform: translateX(1000px) scaleX(2) scaleY(0.2);
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-filter: blur(40px);
filter: blur(40px);
opacity: 0;
}
}
@keyframes slide-out-blurred-right {
0% {
-webkit-transform: translateX(0) scaleY(1) scaleX(1);
transform: translateX(0) scaleY(1) scaleX(1);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-filter: blur(0);
filter: blur(0);
opacity: 1;
}
100% {
-webkit-transform: translateX(1000px) scaleX(2) scaleY(0.2);
transform: translateX(1000px) scaleX(2) scaleY(0.2);
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-filter: blur(40px);
filter: blur(40px);
opacity: 0;
}
}
/*动画从上往下进入*/
.slide-in-blurred-top {
-webkit-animation: slide-in-blurred-top 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
animation: slide-in-blurred-top 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}
/* ----------------------------------------------
* Generated by Animista on 2023-3-8 15:15:40
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation slide-in-blurred-top
* ----------------------------------------
*/
@-webkit-keyframes slide-in-blurred-top {
0% {
-webkit-transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-filter: blur(40px);
filter: blur(40px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0) scaleY(1) scaleX(1);
transform: translateY(0) scaleY(1) scaleX(1);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-filter: blur(0);
filter: blur(0);
opacity: 1;
}
}
@keyframes slide-in-blurred-top {
0% {
-webkit-transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-filter: blur(40px);
filter: blur(40px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0) scaleY(1) scaleX(1);
transform: translateY(0) scaleY(1) scaleX(1);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-filter: blur(0);
filter: blur(0);
opacity: 1;
}
}
/*动画从左往右进入效果*/
.slide-in-blurred-left {
-webkit-animation: slide-in-blurred-left 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
animation: slide-in-blurred-left 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}
/* ----------------------------------------------
* Generated by Animista on 2023-3-14 9:41:31
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation slide-in-blurred-left
* ----------------------------------------
*/
@-webkit-keyframes slide-in-blurred-left {
0% {
-webkit-transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-filter: blur(40px);
filter: blur(40px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0) scaleY(1) scaleX(1);
transform: translateX(0) scaleY(1) scaleX(1);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-filter: blur(0);
filter: blur(0);
opacity: 1;
}
}
@keyframes slide-in-blurred-left {
0% {
-webkit-transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-filter: blur(40px);
filter: blur(40px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0) scaleY(1) scaleX(1);
transform: translateX(0) scaleY(1) scaleX(1);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-filter: blur(0);
filter: blur(0);
opacity: 1;
}
}
// 弹动
.bounce-in-fwd {
-webkit-animation: bounce-in-fwd 1.1s both;
animation: bounce-in-fwd 1.1s both;
}
@-webkit-keyframes bounce-in-fwd {
0% {
-webkit-transform: scale(0);
transform: scale(0);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
38% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}
55% {
-webkit-transform: scale(0.7);
transform: scale(0.7);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
72% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
81% {
-webkit-transform: scale(0.84);
transform: scale(0.84);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
89% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
95% {
-webkit-transform: scale(0.95);
transform: scale(0.95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
@keyframes bounce-in-fwd {
0% {
-webkit-transform: scale(0);
transform: scale(0);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
38% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}
55% {
-webkit-transform: scale(0.7);
transform: scale(0.7);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
72% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
81% {
-webkit-transform: scale(0.84);
transform: scale(0.84);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
89% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
95% {
-webkit-transform: scale(0.95);
transform: scale(0.95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
// 侧边切入
.tilt-in-fwd-tr {
-webkit-animation: tilt-in-fwd-tr 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: tilt-in-fwd-tr 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* ----------------------------------------------
* Generated by Animista on 2023-3-25 11:53:18
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation bounce-in-fwd
* ----------------------------------------
*/
@-webkit-keyframes bounce-in-fwd {
0% {
-webkit-transform: scale(0);
transform: scale(0);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
38% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}
55% {
-webkit-transform: scale(0.7);
transform: scale(0.7);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
72% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
81% {
-webkit-transform: scale(0.84);
transform: scale(0.84);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
89% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
95% {
-webkit-transform: scale(0.95);
transform: scale(0.95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
@keyframes bounce-in-fwd {
0% {
-webkit-transform: scale(0);
transform: scale(0);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
38% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}
55% {
-webkit-transform: scale(0.7);
transform: scale(0.7);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
72% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
81% {
-webkit-transform: scale(0.84);
transform: scale(0.84);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
89% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
95% {
-webkit-transform: scale(0.95);
transform: scale(0.95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
.slide-in-elliptic-top-fwd {
-webkit-animation: slide-in-elliptic-top-fwd 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-in-elliptic-top-fwd 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes bounce-in-fwd {
0% {
-webkit-transform: scale(0);
transform: scale(0);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
38% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}
55% {
-webkit-transform: scale(0.7);
transform: scale(0.7);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
72% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
81% {
-webkit-transform: scale(0.84);
transform: scale(0.84);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
89% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
95% {
-webkit-transform: scale(0.95);
transform: scale(0.95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
@keyframes bounce-in-fwd {
0% {
-webkit-transform: scale(0);
transform: scale(0);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
38% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}
55% {
-webkit-transform: scale(0.7);
transform: scale(0.7);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
72% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
81% {
-webkit-transform: scale(0.84);
transform: scale(0.84);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
89% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
95% {
-webkit-transform: scale(0.95);
transform: scale(0.95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
// 字体
.tracking-in-expand {
-webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}
@-webkit-keyframes tracking-in-expand {
0% {
letter-spacing: -0.5em;
opacity: 0;
}
40% {
opacity: 0.6;
}
100% {
opacity: 1;
}
}
@keyframes tracking-in-expand {
0% {
letter-spacing: -0.5em;
opacity: 0;
}
40% {
opacity: 0.6;
}
100% {
opacity: 1;
}
}
.slide-in-elliptic-top-fwd {
-webkit-animation: slide-in-elliptic-top-fwd 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-in-elliptic-top-fwd 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* ----------------------------------------------
* Generated by Animista on 2023-3-27 8:52:52
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation slide-in-elliptic-top-fwd
* ----------------------------------------
*/
@-webkit-keyframes slide-in-elliptic-top-fwd {
0% {
-webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
transform: translateY(-600px) rotateX(-30deg) scale(0);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
opacity: 0;
}
100% {
-webkit-transform: translateY(0) rotateX(0) scale(1);
transform: translateY(0) rotateX(0) scale(1);
-webkit-transform-origin: 50% 1400px;
transform-origin: 50% 1400px;
opacity: 1;
}
}
@keyframes slide-in-elliptic-top-fwd {
0% {
-webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
transform: translateY(-600px) rotateX(-30deg) scale(0);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
opacity: 0;
}
100% {
-webkit-transform: translateY(0) rotateX(0) scale(1);
transform: translateY(0) rotateX(0) scale(1);
-webkit-transform-origin: 50% 1400px;
transform-origin: 50% 1400px;
opacity: 1;
}
}
.slide-out-elliptic-top-bck {
-webkit-animation: slide-out-elliptic-top-bck 0.7s ease-in both;
animation: slide-out-elliptic-top-bck 0.7s ease-in both;
}
/* ----------------------------------------------
* Generated by Animista on 2023-3-27 8:55:0
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation slide-out-elliptic-top-bck
* ----------------------------------------
*/
@-webkit-keyframes slide-out-elliptic-top-bck {
0% {
-webkit-transform: translateY(0) rotateX(0) scale(1);
transform: translateY(0) rotateX(0) scale(1);
-webkit-transform-origin: 50% 1400px;
transform-origin: 50% 1400px;
opacity: 1;
}
100% {
-webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
transform: translateY(-600px) rotateX(-30deg) scale(0);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
opacity: 1;
}
}
@keyframes slide-out-elliptic-top-bck {
0% {
-webkit-transform: translateY(0) rotateX(0) scale(1);
transform: translateY(0) rotateX(0) scale(1);
-webkit-transform-origin: 50% 1400px;
transform-origin: 50% 1400px;
opacity: 1;
}
100% {
-webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
transform: translateY(-600px) rotateX(-30deg) scale(0);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
opacity: 1;
}
}
/*动画从右到左进入慢速效果*/
.slide-in-right {
-webkit-animation: slide-in-right 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-in-right 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* ----------------------------------------------
* Generated by Animista on 2023-3-25 9:47:38
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation slide-in-right
* ----------------------------------------
*/
@-webkit-keyframes slide-in-right {
0% {
-webkit-transform: translateX(1000px);
transform: translateX(1000px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@keyframes slide-in-right {
0% {
-webkit-transform: translateX(1000px);
transform: translateX(1000px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
/*动画从左到右进入慢速效果*/
.slide-in-left {
-webkit-animation: slide-in-left 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-in-left 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* ----------------------------------------------
* Generated by Animista on 2023-3-25 9:48:33
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation slide-in-left
* ----------------------------------------
*/
@-webkit-keyframes slide-in-left {
0% {
-webkit-transform: translateX(-1000px);
transform: translateX(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@keyframes slide-in-left {
0% {
-webkit-transform: translateX(-1000px);
transform: translateX(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
/*动画从下往上进入慢速效果*/
.slide-in-bottom {
-webkit-animation: slide-in-bottom 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-in-bottom 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* ----------------------------------------------
* Generated by Animista on 2023-3-25 9:49:11
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation slide-in-bottom
* ----------------------------------------
*/
@-webkit-keyframes slide-in-bottom {
0% {
-webkit-transform: translateY(1000px);
transform: translateY(1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
@keyframes slide-in-bottom {
0% {
-webkit-transform: translateY(1000px);
transform: translateY(1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
/*动画从上往下进入慢速效果*/
.slide-in-top {
-webkit-animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* ----------------------------------------------
* Generated by Animista on 2023-3-25 9:50:5
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation slide-in-top
* ----------------------------------------
*/
@-webkit-keyframes slide-in-top {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
@keyframes slide-in-top {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
Reference in New Issue View Git Blame Copy Permalink