//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; } }