vue-animate-onscroll动画库(可来回触发动画)

效果展示
①触发一次动画

触发一次


②触发多次动画

触发多次

1.什么是vue-animate-onscroll
它是一个 Vue 插件，用于在滚动时触发动画效果。它可以帮助开发者在用户滚动页面时，逐渐展示元素，增强用户体验。基本用法是通过在元素上添加特定的指令，指定动画效果和触发条件。

2.使用方法：vue中下载vue-animate-onscroll 包

npm install vue-animate-onscroll --save

在node_modules中将vue-animate-onscroll.es.js复制出来
在这里插入图片描述
在js文件夹中创建vueAnimateOnScroll.js将代码复制进去
在这里插入图片描述
在main.js中引入vueAnimateOnScroll.js

// 引入滚动动画
import vueAnimateOnScroll from '../src/assets/js/vueAnimateOnScroll';
Vue.use(vueAnimateOnScroll)

vue-animate-onscroll 通常需要与 animate.css 搭配使用，以提供动画效果

在css文件夹中创建animate.css在这里插入图片描述
animate.css

@charset "UTF-8";/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT licenseCopyright (c) 2013 Daniel EdenPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/.animated {-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both;
}.animated.hinge {-webkit-animation-duration: 2s;animation-duration: 2s;
}@-webkit-keyframes bounce {0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);transform: translateY(0);}40% {-webkit-transform: translateY(-30px);transform: translateY(-30px);}60% {-webkit-transform: translateY(-15px);transform: translateY(-15px);}
}@keyframes bounce {0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}40% {-webkit-transform: translateY(-30px);-ms-transform: translateY(-30px);transform: translateY(-30px);}60% {-webkit-transform: translateY(-15px);-ms-transform: translateY(-15px);transform: translateY(-15px);}
}.bounce {-webkit-animation-name: bounce;animation-name: bounce;
}@-webkit-keyframes flash {0%, 50%, 100% {opacity: 1;}25%, 75% {opacity: 0;}
}@keyframes flash {0%, 50%, 100% {opacity: 1;}25%, 75% {opacity: 0;}
}.flash {-webkit-animation-name: flash;animation-name: flash;
}/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */@-webkit-keyframes pulse {0% {-webkit-transform: scale(1);transform: scale(1);}50% {-webkit-transform: scale(1.1);transform: scale(1.1);}100% {-webkit-transform: scale(1);transform: scale(1);}
}@keyframes pulse {0% {-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);}50% {-webkit-transform: scale(1.1);-ms-transform: scale(1.1);transform: scale(1.1);}100% {-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);}
}.pulse {-webkit-animation-name: pulse;animation-name: pulse;
}@-webkit-keyframes shake {0%, 100% {-webkit-transform: translateX(0);transform: translateX(0);}10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);transform: translateX(-10px);}20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);transform: translateX(10px);}
}@keyframes shake {0%, 100% {-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);}10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);-ms-transform: translateX(-10px);transform: translateX(-10px);}20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);-ms-transform: translateX(10px);transform: translateX(10px);}
}.shake {-webkit-animation-name: shake;animation-name: shake;
}@-webkit-keyframes swing {0%{opacity: 0;-webkit-transform: rotate(15deg);transform: rotate(15deg);}20% {opacity: 1;-webkit-transform: rotate(15deg);transform: rotate(15deg);}40% {opacity: 1;-webkit-transform: rotate(-10deg);transform: rotate(-10deg);}60% {opacity: 1;-webkit-transform: rotate(5deg);transform: rotate(5deg);}80% {opacity: 1;-webkit-transform: rotate(-5deg);transform: rotate(-5deg);}100% {opacity: 1;-webkit-transform: rotate(0deg);transform: rotate(0deg);}
}@keyframes swing {0%{opacity: 0;-webkit-transform: rotate(15deg);-ms-transform: rotate(15deg);transform: rotate(15deg);}20% {opacity: 1;-webkit-transform: rotate(15deg);-ms-transform: rotate(15deg);transform: rotate(15deg);}40% {-webkit-transform: rotate(-10deg);-ms-transform: rotate(-10deg);transform: rotate(-10deg);}60% {-webkit-transform: rotate(5deg);-ms-transform: rotate(5deg);transform: rotate(5deg);}80% {-webkit-transform: rotate(-5deg);-ms-transform: rotate(-5deg);transform: rotate(-5deg);}100% {-webkit-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);}
}.swing {-webkit-transform-origin: top center;-ms-transform-origin: top center;transform-origin: top center;-webkit-animation-name: swing;animation-name: swing;
}@-webkit-keyframes tada {0% {-webkit-transform: scale(1);transform: scale(1);}10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);transform: scale(0.9) rotate(-3deg);}30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);transform: scale(1.1) rotate(3deg);}40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);transform: scale(1.1) rotate(-3deg);}100% {-webkit-transform: scale(1) rotate(0);transform: scale(1) rotate(0);}
}@keyframes tada {0% {-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);}10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);-ms-transform: scale(0.9) rotate(-3deg);transform: scale(0.9) rotate(-3deg);}30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);-ms-transform: scale(1.1) rotate(3deg);transform: scale(1.1) rotate(3deg);}40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);-ms-transform: scale(1.1) rotate(-3deg);transform: scale(1.1) rotate(-3deg);}100% {-webkit-transform: scale(1) rotate(0);-ms-transform: scale(1) rotate(0);transform: scale(1) rotate(0);}
}.tada {-webkit-animation-name: tada;animation-name: tada;
}/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */@-webkit-keyframes wobble {0% {-webkit-transform: translateX(0%);transform: translateX(0%);}15% {-webkit-transform: translateX(-25%) rotate(-5deg);transform: translateX(-25%) rotate(-5deg);}30% {-webkit-transform: translateX(20%) rotate(3deg);transform: translateX(20%) rotate(3deg);}45% {-webkit-transform: translateX(-15%) rotate(-3deg);transform: translateX(-15%) rotate(-3deg);}60% {-webkit-transform: translateX(10%) rotate(2deg);transform: translateX(10%) rotate(2deg);}75% {-webkit-transform: translateX(-5%) rotate(-1deg);transform: translateX(-5%) rotate(-1deg);}100% {-webkit-transform: translateX(0%);transform: translateX(0%);}
}@keyframes wobble {0% {-webkit-transform: translateX(0%);-ms-transform: translateX(0%);transform: translateX(0%);}15% {-webkit-transform: translateX(-25%) rotate(-5deg);-ms-transform: translateX(-25%) rotate(-5deg);transform: translateX(-25%) rotate(-5deg);}30% {-webkit-transform: translateX(20%) rotate(3deg);-ms-transform: translateX(20%) rotate(3deg);transform: translateX(20%) rotate(3deg);}45% {-webkit-transform: translateX(-15%) rotate(-3deg);-ms-transform: translateX(-15%) rotate(-3deg);transform: translateX(-15%) rotate(-3deg);}60% {-webkit-transform: translateX(10%) rotate(2deg);-ms-transform: translateX(10%) rotate(2deg);transform: translateX(10%) rotate(2deg);}75% {-webkit-transform: translateX(-5%) rotate(-1deg);-ms-transform: translateX(-5%) rotate(-1deg);transform: translateX(-5%) rotate(-1deg);}100% {-webkit-transform: translateX(0%);-ms-transform: translateX(0%);transform: translateX(0%);}
}.wobble {-webkit-animation-name: wobble;animation-name: wobble;
}@-webkit-keyframes bounceIn {0% {opacity: 0;-webkit-transform: scale(.3);transform: scale(.3);}50% {opacity: 1;-webkit-transform: scale(1.05);transform: scale(1.05);}70% {-webkit-transform: scale(.9);transform: scale(.9);}100% {-webkit-transform: scale(1);transform: scale(1);}
}@keyframes bounceIn {0% {opacity: 0;-webkit-transform: scale(.3);-ms-transform: scale(.3);transform: scale(.3);}50% {opacity: 1;-webkit-transform: scale(1.05);-ms-transform: scale(1.05);transform: scale(1.05);}70% {-webkit-transform: scale(.9);-ms-transform: scale(.9);transform: scale(.9);}100% {-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);}
}.bounceIn {-webkit-animation-name: bounceIn;animation-name: bounceIn;
}@-webkit-keyframes bounceInDown {0% {opacity: 0;-webkit-transform: translateY(-2000px);transform: translateY(-2000px);}60% {opacity: 1;-webkit-transform: translateY(30px);transform: translateY(30px);}80% {-webkit-transform: translateY(-10px);transform: translateY(-10px);}100% {-webkit-transform: translateY(0);transform: translateY(0);}
}@keyframes bounceInDown {0% {opacity: 0;-webkit-transform: translateY(-2000px);-ms-transform: translateY(-2000px);transform: translateY(-2000px);}60% {opacity: 1;-webkit-transform: translateY(30px);-ms-transform: translateY(30px);transform: translateY(30px);}80% {-webkit-transform: translateY(-10px);-ms-transform: translateY(-10px);transform: translateY(-10px);}100% {-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}
}.bounceInDown {-webkit-animation-name: bounceInDown;animation-name: bounceInDown;
}@-webkit-keyframes bounceInLeft {0% {opacity: 0;-webkit-transform: translateX(-2000px);transform: translateX(-2000px);}60% {opacity: 1;-webkit-transform: translateX(30px);transform: translateX(30px);}80% {-webkit-transform: translateX(-10px);transform: translateX(-10px);}100% {-webkit-transform: translateX(0);transform: translateX(0);}
}@keyframes bounceInLeft {0% {opacity: 0;-webkit-transform: translateX(-2000px);-ms-transform: translateX(-2000px);transform: translateX(-2000px);}60% {opacity: 1;-webkit-transform: translateX(30px);-ms-transform: translateX(30px);transform: translateX(30px);}80% {-webkit-transform: translateX(-10px);-ms-transform: translateX(-10px);transform: translateX(-10px);}100% {-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);}
}.bounceInLeft {-webkit-animation-name: bounceInLeft;animation-name: bounceInLeft;
}@-webkit-keyframes bounceInRight {0% {opacity: 0;-webkit-transform: translateX(2000px);transform: translateX(2000px);}60% {opacity: 1;-webkit-transform: translateX(-30px);transform: translateX(-30px);}80% {-webkit-transform: translateX(10px);transform: translateX(10px);}100% {-webkit-transform: translateX(0);transform: translateX(0);}
}@keyframes bounceInRight {0% {opacity: 0;-webkit-transform: translateX(2000px);-ms-transform: translateX(2000px);transform: translateX(2000px);}60% {opacity: 1;-webkit-transform: translateX(-30px);-ms-transform: translateX(-30px);transform: translateX(-30px);}80% {-webkit-transform: translateX(10px);-ms-transform: translateX(10px);transform: translateX(10px);}100% {-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);}
}.bounceInRight {-webkit-animation-name: bounceInRight;animation-name: bounceInRight;
}@-webkit-keyframes bounceInUp {0% {opacity: 0;-webkit-transform: translateY(2000px);transform: translateY(2000px);}60% {opacity: 1;-webkit-transform: translateY(-30px);transform: translateY(-30px);}80% {-webkit-transform: translateY(10px);transform: translateY(10px);}100% {-webkit-transform: translateY(0);transform: translateY(0);}
}@keyframes bounceInUp {0% {opacity: 0;-webkit-transform: translateY(2000px);-ms-transform: translateY(2000px);transform: translateY(2000px);}60% {opacity: 1;-webkit-transform: translateY(-30px);-ms-transform: translateY(-30px);transform: translateY(-30px);}80% {-webkit-transform: translateY(10px);-ms-transform: translateY(10px);transform: translateY(10px);}100% {-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}
}.bounceInUp {-webkit-animation-name: bounceInUp;animation-name: bounceInUp;
}@-webkit-keyframes bounceOut {0% {-webkit-transform: scale(1);transform: scale(1);}25% {-webkit-transform: scale(.95);transform: scale(.95);}50% {opacity: 1;-webkit-transform: scale(1.1);transform: scale(1.1);}100% {opacity: 0;-webkit-transform: scale(.3);transform: scale(.3);}
}@keyframes bounceOut {0% {-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);}25% {-webkit-transform: scale(.95);-ms-transform: scale(.95);transform: scale(.95);}50% {opacity: 1;-webkit-transform: scale(1.1);-ms-transform: scale(1.1);transform: scale(1.1);}100% {opacity: 0;-webkit-transform: scale(.3);-ms-transform: scale(.3);transform: scale(.3);}
}.bounceOut {-webkit-animation-name: bounceOut;animation-name: bounceOut;
}@-webkit-keyframes bounceOutDown {0% {-webkit-transform: translateY(0);transform: translateY(0);}20% {opacity: 1;-webkit-transform: translateY(-20px);transform: translateY(-20px);}100% {opacity: 0;-webkit-transform: translateY(2000px);transform: translateY(2000px);}
}@keyframes bounceOutDown {0% {-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}20% {opacity: 1;-webkit-transform: translateY(-20px);-ms-transform: translateY(-20px);transform: translateY(-20px);}100% {opacity: 0;-webkit-transform: translateY(2000px);-ms-transform: translateY(2000px);transform: translateY(2000px);}
}.bounceOutDown {-webkit-animation-name: bounceOutDown;animation-name: bounceOutDown;
}@-webkit-keyframes bounceOutLeft {0% {-webkit-transform: translateX(0);transform: translateX(0);}20% {opacity: 1;-webkit-transform: translateX(20px);transform: translateX(20px);}100% {opacity: 0;-webkit-transform: translateX(-2000px);transform: translateX(-2000px);}
}@keyframes bounceOutLeft {0% {-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);}20% {opacity: 1;-webkit-transform: translateX(20px);-ms-transform: translateX(20px);transform: translateX(20px);}100% {opacity: 0;-webkit-transform: translateX(-2000px);-ms-transform: translateX(-2000px);transform: translateX(-2000px);}
}.bounceOutLeft {-webkit-animation-name: bounceOutLeft;animation-name: bounceOutLeft;
}@-webkit-keyframes bounceOutRight {0% {-webkit-transform: translateX(0);transform: translateX(0);}20% {opacity: 1;-webkit-transform: translateX(-20px);transform: translateX(-20px);}100% {opacity: 0;-webkit-transform: translateX(2000px);transform: translateX(2000px);}
}@keyframes bounceOutRight {0% {-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);}20% {opacity: 1;-webkit-transform: translateX(-20px);-ms-transform: translateX(-20px);transform: translateX(-20px);}100% {opacity: 0;-webkit-transform: translateX(2000px);-ms-transform: translateX(2000px);transform: translateX(2000px);}
}.bounceOutRight {-webkit-animation-name: bounceOutRight;animation-name: bounceOutRight;
}@-webkit-keyframes bounceOutUp {0% {-webkit-transform: translateY(0);transform: translateY(0);}20% {opacity: 1;-webkit-transform: translateY(20px);transform: translateY(20px);}100% {opacity: 0;-webkit-transform: translateY(-2000px);transform: translateY(-2000px);}
}@keyframes bounceOutUp {0% {-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}20% {opacity: 1;-webkit-transform: translateY(20px);-ms-transform: translateY(20px);transform: translateY(20px);}100% {opacity: 0;-webkit-transform: translateY(-2000px);-ms-transform: translateY(-2000px);transform: translateY(-2000px);}
}.bounceOutUp {-webkit-animation-name: bounceOutUp;animation-name: bounceOutUp;
}@-webkit-keyframes fadeIn {0% {opacity: 0;}100% {opacity: 1;}
}@keyframes fadeIn {0% {opacity: 0;}100% {opacity: 1;}
}.fadeIn {-webkit-animation-name: fadeIn;animation-name: fadeIn;
}@-webkit-keyframes fadeInDown {0% {opacity: 0;-webkit-transform: translateY(-20px);transform: translateY(-20px);}100% {opacity: 1;-webkit-transform: translateY(0);transform: translateY(0);}
}@keyframes fadeInDown {0% {opacity: 0;-webkit-transform: translateY(-20px);-ms-transform: translateY(-20px);transform: translateY(-20px);}100% {opacity: 1;-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}
}.fadeInDown {-webkit-animation-name: fadeInDown;animation-name: fadeInDown;
}@-webkit-keyframes fadeInDownBig {0% {opacity: 0;-webkit-transform: translateY(-2000px);transform: translateY(-2000px);}100% {opacity: 1;-webkit-transform: translateY(0);transform: translateY(0);}
}@keyframes fadeInDownBig {0% {opacity: 0;-webkit-transform: translateY(-2000px);-ms-transform: translateY(-2000px);transform: translateY(-2000px);}100% {opacity: 1;-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}
}.fadeInDownBig {-webkit-animation-name: fadeInDownBig;animation-name: fadeInDownBig;
}@-webkit-keyframes fadeInLeft {0% {opacity: 0;-webkit-transform: translateX(-20px);transform: translateX(-20px);}100% {opacity: 1;-webkit-transform: translateX(0);transform: translateX(0);}
}@keyframes fadeInLeft {0% {opacity: 0;-webkit-transform: translateX(-20px);-ms-transform: translateX(-20px);transform: translateX(-20px);}100% {opacity: 1;-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);}
}.fadeInLeft {-webkit-animation-name: fadeInLeft;animation-name: fadeInLeft;
}@-webkit-keyframes fadeInLeftBig {0% {opacity: 0;-webkit-transform: translateX(-2000px);transform: translateX(-2000px);}100% {opacity: 1;-webkit-transform: translateX(0);transform: translateX(0);}
}@keyframes fadeInLeftBig {0% {opacity: 0;-webkit-transform: translateX(-2000px);-ms-transform: translateX(-2000px);transform: translateX(-2000px);}100% {opacity: 1;-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);}
}.fadeInLeftBig {-webkit-animation-name: fadeInLeftBig;animation-name: fadeInLeftBig;
}@-webkit-keyframes fadeInRight {0% {opacity: 0;-webkit-transform: translateX(20px);transform: translateX(20px);}100% {opacity: 1;-webkit-transform: translateX(0);transform: translateX(0);}
}@keyframes fadeInRight {0% {opacity: 0;-webkit-transform: translateX(20px);-ms-transform: translateX(20px);transform: translateX(20px);}100% {opacity: 1;-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);}
}.fadeInRight {-webkit-animation-name: fadeInRight;animation-name: fadeInRight;
}@-webkit-keyframes fadeInRightBig {0% {opacity: 0;-webkit-transform: translateX(2000px);transform: translateX(2000px);}100% {opacity: 1;-webkit-transform: translateX(0);transform: translateX(0);}
}@keyframes fadeInRightBig {0% {opacity: 0;-webkit-transform: translateX(2000px);-ms-transform: translateX(2000px);transform: translateX(2000px);}100% {opacity: 1;-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);}
}.fadeInRightBig {-webkit-animation-name: fadeInRightBig;animation-name: fadeInRightBig;
}@-webkit-keyframes fadeInUp {0% {opacity: 0;-webkit-transform: translateY(20px);transform: translateY(20px);}100% {opacity: 1;-webkit-transform: translateY(0);transform: translateY(0);}
}@keyframes fadeInUp {0% {opacity: 0;-webkit-transform: translateY(20px);-ms-transform: translateY(20px);transform: translateY(20px);}100% {opacity: 1;-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}
}.fadeInUp {-webkit-animation-name: fadeInUp;animation-name: fadeInUp;
}@-webkit-keyframes fadeInUpBig {0% {opacity: 0;-webkit-transform: translateY(2000px);transform: translateY(2000px);}100% {opacity: 1;-webkit-transform: translateY(0);transform: translateY(0);}
}@keyframes fadeInUpBig {0% {opacity: 0;-webkit-transform: translateY(2000px);-ms-transform: translateY(2000px);transform: translateY(2000px);}100% {opacity: 1;-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}
}.fadeInUpBig {-webkit-animation-name: fadeInUpBig;animation-name: fadeInUpBig;
}@-webkit-keyframes fadeOut {0% {opacity: 1;}100% {opacity: 0;}
}@keyframes fadeOut {0% {opacity: 1;}100% {opacity: 0;}
}.fadeOut {-webkit-animation-name: fadeOut;animation-name: fadeOut;
}@-webkit-keyframes fadeOutDown {0% {opacity: 1;-webkit-transform: translateY(0);transform: translateY(0);}100% {opacity: 0;-webkit-transform: translateY(20px);transform: translateY(20px);}
}@keyframes fadeOutDown {0% {opacity: 1;-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}100% {opacity: 0;-webkit-transform: translateY(20px);-ms-transform: translateY(20px);transform: translateY(20px);}
}.fadeOutDown {-webkit-animation-name: fadeOutDown;animation-name: fadeOutDown;
}@-webkit-keyframes fadeOutDownBig {0% {opacity: 1;-webkit-transform: translateY(0);transform: translateY(0);}100% {opacity: 0;-webkit-transform: translateY(2000px);transform: translateY(2000px);}
}@keyframes fadeOutDownBig {0% {opacity: 1;-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}100% {opacity: 0;-webkit-transform: translateY(2000px);-ms-transform: translateY(2000px);transform: translateY(2000px);}
}.fadeOutDownBig {-webkit-animation-name: fadeOutDownBig;animation-name: fadeOutDownBig;
}@-webkit-keyframes fadeOutLeft {0% {opacity: 1;-webkit-transform: translateX(0);transform: translateX(0);}100% {opacity: 0;-webkit-transform: translateX(-20px);transform: translateX(-20px);}
}@keyframes fadeOutLeft {0% {opacity: 1;-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);}100% {opacity: 0;-webkit-transform: translateX(-20px);-ms-transform: translateX(-20px);transform: translateX(-20px);}
}.fadeOutLeft {-webkit-animation-name: fadeOutLeft;animation-name: fadeOutLeft;
}@-webkit-keyframes fadeOutLeftBig {0% {opacity: 1;-webkit-transform: translateX(0);transform: translateX(0);}100% {opacity: 0;-webkit-transform: translateX(-2000px);transform: translateX(-2000px);}
}@keyframes fadeOutLeftBig {0% {opacity: 1;-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);}100% {opacity: 0;-webkit-transform: translateX(-2000px);-ms-transform: translateX(-2000px);transform: translateX(-2000px);}
}.fadeOutLeftBig {-webkit-animation-name: fadeOutLeftBig;animation-name: fadeOutLeftBig;
}@-webkit-keyframes fadeOutRight {0% {opacity: 1;-webkit-transform: translateX(0);transform: translateX(0);}100% {opacity: 0;-webkit-transform: translateX(20px);transform: translateX(20px);}
}@keyframes fadeOutRight {0% {opacity: 1;-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);}100% {opacity: 0;-webkit-transform: translateX(20px);-ms-transform: translateX(20px);transform: translateX(20px);}
}.fadeOutRight {-webkit-animation-name: fadeOutRight;animation-name: fadeOutRight;
}@-webkit-keyframes fadeOutRightBig {0% {opacity: 1;-webkit-transform: translateX(0);transform: translateX(0);}100% {opacity: 0;-webkit-transform: translateX(2000px);transform: translateX(2000px);}
}@keyframes fadeOutRightBig {0% {opacity: 1;-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);}100% {opacity: 0;-webkit-transform: translateX(2000px);-ms-transform: translateX(2000px);transform: translateX(2000px);}
}.fadeOutRightBig {-webkit-animation-name: fadeOutRightBig;animation-name: fadeOutRightBig;
}@-webkit-keyframes fadeOutUp {0% {opacity: 1;-webkit-transform: translateY(0);transform: translateY(0);}100% {opacity: 0;-webkit-transform: translateY(-20px);transform: translateY(-20px);}
}@keyframes fadeOutUp {0% {opacity: 1;-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}100% {opacity: 0;-webkit-transform: translateY(-20px);-ms-transform: translateY(-20px);transform: translateY(-20px);}
}.fadeOutUp {-webkit-animation-name: fadeOutUp;animation-name: fadeOutUp;
}@-webkit-keyframes fadeOutUpBig {0% {opacity: 1;-webkit-transform: translateY(0);transform: translateY(0);}100% {opacity: 0;-webkit-transform: translateY(-2000px);transform: translateY(-2000px);}
}@keyframes fadeOutUpBig {0% {opacity: 1;-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}100% {opacity: 0;-webkit-transform: translateY(-2000px);-ms-transform: translateY(-2000px);transform: translateY(-2000px);}
}.fadeOutUpBig {-webkit-animation-name: fadeOutUpBig;animation-name: fadeOutUpBig;
}@-webkit-keyframes flip {0% {-webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);transform: perspective(400px) translateZ(0) rotateY(0) scale(1);-webkit-animation-timing-function: ease-out;animation-timing-function: ease-out;}40% {-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);-webkit-animation-timing-function: ease-out;animation-timing-function: ease-out;}50% {-webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-webkit-animation-timing-function: ease-in;animation-timing-function: ease-in;}80% {-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);-webkit-animation-timing-function: ease-in;animation-timing-function: ease-in;}100% {-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);-webkit-animation-timing-function: ease-in;animation-timing-function: ease-in;}
}@keyframes flip {0% {-webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);-ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);transform: perspective(400px) translateZ(0) rotateY(0) scale(1);-webkit-animation-timing-function: ease-out;animation-timing-function: ease-out;}40% {-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);-ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);-webkit-animation-timing-function: ease-out;animation-timing-function: ease-out;}50% {-webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-webkit-animation-timing-function: ease-in;animation-timing-function: ease-in;}80% {-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);-ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);-webkit-animation-timing-function: ease-in;animation-timing-function: ease-in;}100% {-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);-ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);-webkit-animation-timing-function: ease-in;animation-timing-function: ease-in;}
}.animated.flip {-webkit-backface-visibility: visible;-ms-backface-visibility: visible;backface-visibility: visible;-webkit-animation-name: flip;animation-name: flip;
}@-webkit-keyframes flipInX {0% {-webkit-transform: perspective(400px) rotateX(90deg);transform: perspective(400px) rotateX(90deg);opacity: 0;}40% {-webkit-transform: perspective(400px) rotateX(-10deg);transform: perspective(400px) rotateX(-10deg);}70% {-webkit-transform: perspective(400px) rotateX(10deg);transform: perspective(400px) rotateX(10deg);}100% {-webkit-transform: perspective(400px) rotateX(0deg);transform: perspective(400px) rotateX(0deg);opacity: 1;}
}@keyframes flipInX {0% {-webkit-transform: perspective(400px) rotateX(90deg);-ms-transform: perspective(400px) rotateX(90deg);transform: perspective(400px) rotateX(90deg);opacity: 0;}40% {-webkit-transform: perspective(400px) rotateX(-10deg);-ms-transform: perspective(400px) rotateX(-10deg);transform: perspective(400px) rotateX(-10deg);}70% {-webkit-transform: perspective(400px) rotateX(10deg);-ms-transform: perspective(400px) rotateX(10deg);transform: perspective(400px) rotateX(10deg);}100% {-webkit-transform: perspective(400px) rotateX(0deg);-ms-transform: perspective(400px) rotateX(0deg);transform: perspective(400px) rotateX(0deg);opacity: 1;}
}.flipInX {-webkit-backface-visibility: visible !important;-ms-backface-visibility: visible !important;backface-visibility: visible !important;-webkit-animation-name: flipInX;animation-name: flipInX;
}@-webkit-keyframes flipInY {0% {-webkit-transform: perspective(400px) rotateY(90deg);transform: perspective(400px) rotateY(90deg);opacity: 0;}40% {-webkit-transform: perspective(400px) rotateY(-10deg);transform: perspective(400px) rotateY(-10deg);}70% {-webkit-transform: perspective(400px) rotateY(10deg);transform: perspective(400px) rotateY(10deg);}100% {-webkit-transform: perspective(400px) rotateY(0deg);transform: perspective(400px) rotateY(0deg);opacity: 1;}
}@keyframes flipInY {0% {-webkit-transform: perspective(400px) rotateY(90deg);-ms-transform: perspective(400px) rotateY(90deg);transform: perspective(400px) rotateY(90deg);opacity: 0;}40% {-webkit-transform: perspective(400px) rotateY(-10deg);-ms-transform: perspective(400px) rotateY(-10deg);transform: perspective(400px) rotateY(-10deg);}70% {-webkit-transform: perspective(400px) rotateY(10deg);-ms-transform: perspective(400px) rotateY(10deg);transform: perspective(400px) rotateY(10deg);}100% {-webkit-transform: perspective(400px) rotateY(0deg);-ms-transform: perspective(400px) rotateY(0deg);transform: perspective(400px) rotateY(0deg);opacity: 1;}
}.flipInY {-webkit-backface-visibility: visible !important;-ms-backface-visibility: visible !important;backface-visibility: visible !important;-webkit-animation-name: flipInY;animation-name: flipInY;
}@-webkit-keyframes flipOutX {0% {-webkit-transform: perspective(400px) rotateX(0deg);transform: perspective(400px) rotateX(0deg);opacity: 1;}100% {-webkit-transform: perspective(400px) rotateX(90deg);transform: perspective(400px) rotateX(90deg);opacity: 0;}
}@keyframes flipOutX {0% {-webkit-transform: perspective(400px) rotateX(0deg);-ms-transform: perspective(400px) rotateX(0deg);transform: perspective(400px) rotateX(0deg);opacity: 1;}100% {-webkit-transform: perspective(400px) rotateX(90deg);-ms-transform: perspective(400px) rotateX(90deg);transform: perspective(400px) rotateX(90deg);opacity: 0;}
}.flipOutX {-webkit-animation-name: flipOutX;animation-name: flipOutX;-webkit-backface-visibility: visible !important;-ms-backface-visibility: visible !important;backface-visibility: visible !important;
}@-webkit-keyframes flipOutY {0% {-webkit-transform: perspective(400px) rotateY(0deg);transform: perspective(400px) rotateY(0deg);opacity: 1;}100% {-webkit-transform: perspective(400px) rotateY(90deg);transform: perspective(400px) rotateY(90deg);opacity: 0;}
}@keyframes flipOutY {0% {-webkit-transform: perspective(400px) rotateY(0deg);-ms-transform: perspective(400px) rotateY(0deg);transform: perspective(400px) rotateY(0deg);opacity: 1;}100% {-webkit-transform: perspective(400px) rotateY(90deg);-ms-transform: perspective(400px) rotateY(90deg);transform: perspective(400px) rotateY(90deg);opacity: 0;}
}.flipOutY {-webkit-backface-visibility: visible !important;-ms-backface-visibility: visible !important;backface-visibility: visible !important;-webkit-animation-name: flipOutY;animation-name: flipOutY;
}@-webkit-keyframes lightSpeedIn {0% {-webkit-transform: translateX(100%) skewX(-30deg);transform: translateX(100%) skewX(-30deg);opacity: 0;}60% {-webkit-transform: translateX(-20%) skewX(30deg);transform: translateX(-20%) skewX(30deg);opacity: 1;}80% {-webkit-transform: translateX(0%) skewX(-15deg);transform: translateX(0%) skewX(-15deg);opacity: 1;}100% {-webkit-transform: translateX(0%) skewX(0deg);transform: translateX(0%) skewX(0deg);opacity: 1;}
}@keyframes lightSpeedIn {0% {-webkit-transform: translateX(100%) skewX(-30deg);-ms-transform: translateX(100%) skewX(-30deg);transform: translateX(100%) skewX(-30deg);opacity: 0;}60% {-webkit-transform: translateX(-20%) skewX(30deg);-ms-transform: translateX(-20%) skewX(30deg);transform: translateX(-20%) skewX(30deg);opacity: 1;}80% {-webkit-transform: translateX(0%) skewX(-15deg);-ms-transform: translateX(0%) skewX(-15deg);transform: translateX(0%) skewX(-15deg);opacity: 1;}100% {-webkit-transform: translateX(0%) skewX(0deg);-ms-transform: translateX(0%) skewX(0deg);transform: translateX(0%) skewX(0deg);opacity: 1;}
}.lightSpeedIn {-webkit-animation-name: lightSpeedIn;animation-name: lightSpeedIn;-webkit-animation-timing-function: ease-out;animation-timing-function: ease-out;
}@-webkit-keyframes lightSpeedOut {0% {-webkit-transform: translateX(0%) skewX(0deg);transform: translateX(0%) skewX(0deg);opacity: 1;}100% {-webkit-transform: translateX(100%) skewX(-30deg);transform: translateX(100%) skewX(-30deg);opacity: 0;}
}@keyframes lightSpeedOut {0% {-webkit-transform: translateX(0%) skewX(0deg);-ms-transform: translateX(0%) skewX(0deg);transform: translateX(0%) skewX(0deg);opacity: 1;}100% {-webkit-transform: translateX(100%) skewX(-30deg);-ms-transform: translateX(100%) skewX(-30deg);transform: translateX(100%) skewX(-30deg);opacity: 0;}
}.lightSpeedOut {-webkit-animation-name: lightSpeedOut;animation-name: lightSpeedOut;-webkit-animation-timing-function: ease-in;animation-timing-function: ease-in;
}@-webkit-keyframes rotateIn {0% {-webkit-transform-origin: center center;transform-origin: center center;-webkit-transform: rotate(-200deg);transform: rotate(-200deg);opacity: 0;}100% {-webkit-transform-origin: center center;transform-origin: center center;-webkit-transform: rotate(0);transform: rotate(0);opacity: 1;}
}@keyframes rotateIn {0% {-webkit-transform-origin: center center;-ms-transform-origin: center center;transform-origin: center center;-webkit-transform: rotate(-200deg);-ms-transform: rotate(-200deg);transform: rotate(-200deg);opacity: 0;}100% {-webkit-transform-origin: center center;-ms-transform-origin: center center;transform-origin: center center;-webkit-transform: rotate(0);-ms-transform: rotate(0);transform: rotate(0);opacity: 1;}
}.rotateIn {-webkit-animation-name: rotateIn;animation-name: rotateIn;
}@-webkit-keyframes rotateInDownLeft {0% {-webkit-transform-origin: left bottom;transform-origin: left bottom;-webkit-transform: rotate(-90deg);transform: rotate(-90deg);opacity: 0;}100% {-webkit-transform-origin: left bottom;transform-origin: left bottom;-webkit-transform: rotate(0);transform: rotate(0);opacity: 1;}
}@keyframes rotateInDownLeft {0% {-webkit-transform-origin: left bottom;-ms-transform-origin: left bottom;transform-origin: left bottom;-webkit-transform: rotate(-90deg);-ms-transform: rotate(-90deg);transform: rotate(-90deg);opacity: 0;}100% {-webkit-transform-origin: left bottom;-ms-transform-origin: left bottom;transform-origin: left bottom;-webkit-transform: rotate(0);-ms-transform: rotate(0);transform: rotate(0);opacity: 1;}
}.rotateInDownLeft {-webkit-animation-name: rotateInDownLeft;animation-name: rotateInDownLeft;
}@-webkit-keyframes rotateInDownRight {0% {-webkit-transform-origin: right bottom;transform-origin: right bottom;-webkit-transform: rotate(90deg);transform: rotate(90deg);opacity: 0;}100% {-webkit-transform-origin: right bottom;transform-origin: right bottom;-webkit-transform: rotate(0);transform: rotate(0);opacity: 1;}
}@keyframes rotateInDownRight {0% {-webkit-transform-origin: right bottom;-ms-transform-origin: right bottom;transform-origin: right bottom;-webkit-transform: rotate(90deg);-ms-transform: rotate(90deg);transform: rotate(90deg);opacity: 0;}100% {-webkit-transform-origin: right bottom;-ms-transform-origin: right bottom;transform-origin: right bottom;-webkit-transform: rotate(0);-ms-transform: rotate(0);transform: rotate(0);opacity: 1;}
}.rotateInDownRight {-webkit-animation-name: rotateInDownRight;animation-name: rotateInDownRight;
}@-webkit-keyframes rotateInUpLeft {0% {-webkit-transform-origin: left bottom;transform-origin: left bottom;-webkit-transform: rotate(90deg);transform: rotate(90deg);opacity: 0;}100% {-webkit-transform-origin: left bottom;transform-origin: left bottom;-webkit-transform: rotate(0);transform: rotate(0);opacity: 1;}
}@keyframes rotateInUpLeft {0% {-webkit-transform-origin: left bottom;-ms-transform-origin: left bottom;transform-origin: left bottom;-webkit-transform: rotate(90deg);-ms-transform: rotate(90deg);transform: rotate(90deg);opacity: 0;}100% {-webkit-transform-origin: left bottom;-ms-transform-origin: left bottom;transform-origin: left bottom;-webkit-transform: rotate(0);-ms-transform: rotate(0);transform: rotate(0);opacity: 1;}
}.rotateInUpLeft {-webkit-animation-name: rotateInUpLeft;animation-name: rotateInUpLeft;
}@-webkit-keyframes rotateInUpRight {0% {-webkit-transform-origin: right bottom;transform-origin: right bottom;-webkit-transform: rotate(-90deg);transform: rotate(-90deg);opacity: 0;}100% {-webkit-transform-origin: right bottom;transform-origin: right bottom;-webkit-transform: rotate(0);transform: rotate(0);opacity: 1;}
}@keyframes rotateInUpRight {0% {-webkit-transform-origin: right bottom;-ms-transform-origin: right bottom;transform-origin: right bottom;-webkit-transform: rotate(-90deg);-ms-transform: rotate(-90deg);transform: rotate(-90deg);opacity: 0;}100% {-webkit-transform-origin: right bottom;-ms-transform-origin: right bottom;transform-origin: right bottom;-webkit-transform: rotate(0);-ms-transform: rotate(0);transform: rotate(0);opacity: 1;}
}.rotateInUpRight {-webkit-animation-name: rotateInUpRight;animation-name: rotateInUpRight;
}@-webkit-keyframes rotateOut {0% {-webkit-transform-origin: center center;transform-origin: center center;-webkit-transform: rotate(0);transform: rotate(0);opacity: 1;}100% {-webkit-transform-origin: center center;transform-origin: center center;-webkit-transform: rotate(200deg);transform: rotate(200deg);opacity: 0;}
}@keyframes rotateOut {0% {-webkit-transform-origin: center center;-ms-transform-origin: center center;transform-origin: center center;-webkit-transform: rotate(0);-ms-transform: rotate(0);transform: rotate(0);opacity: 1;}100% {-webkit-transform-origin: center center;-ms-transform-origin: center center;transform-origin: center center;-webkit-transform: rotate(200deg);-ms-transform: rotate(200deg);transform: rotate(200deg);opacity: 0;}
}.rotateOut {-webkit-animation-name: rotateOut;animation-name: rotateOut;
}@-webkit-keyframes rotateOutDownLeft {0% {-webkit-transform-origin: left bottom;transform-origin: left bottom;-webkit-transform: rotate(0);transform: rotate(0);opacity: 1;}100% {-webkit-transform-origin: left bottom;transform-origin: left bottom;-webkit-transform: rotate(90deg);transform: rotate(90deg);opacity: 0;}
}@keyframes rotateOutDownLeft {0% {-webkit-transform-origin: left bottom;-ms-transform-origin: left bottom;transform-origin: left bottom;-webkit-transform: rotate(0);-ms-transform: rotate(0);transform: rotate(0);opacity: 1;}100% {-webkit-transform-origin: left bottom;-ms-transform-origin: left bottom;transform-origin: left bottom;-webkit-transform: rotate(90deg);-ms-transform: rotate(90deg);transform: rotate(90deg);opacity: 0;}
}.rotateOutDownLeft {-webkit-animation-name: rotateOutDownLeft;animation-name: rotateOutDownLeft;
}@-webkit-keyframes rotateOutDownRight {0% {-webkit-transform-origin: right bottom;transform-origin: right bottom;-webkit-transform: rotate(0);transform: rotate(0);opacity: 1;}100% {-webkit-transform-origin: right bottom;transform-origin: right bottom;-webkit-transform: rotate(-90deg);transform: rotate(-90deg);opacity: 0;}
}@keyframes rotateOutDownRight {0% {-webkit-transform-origin: right bottom;-ms-transform-origin: right bottom;transform-origin: right bottom;-webkit-transform: rotate(0);-ms-transform: rotate(0);transform: rotate(0);opacity: 1;}100% {-webkit-transform-origin: right bottom;-ms-transform-origin: right bottom;transform-origin: right bottom;-webkit-transform: rotate(-90deg);-ms-transform: rotate(-90deg);transform: rotate(-90deg);opacity: 0;}
}.rotateOutDownRight {-webkit-animation-name: rotateOutDownRight;animation-name: rotateOutDownRight;
}@-webkit-keyframes rotateOutUpLeft {0% {-webkit-transform-origin: left bottom;transform-origin: left bottom;-webkit-transform: rotate(0);transform: rotate(0);opacity: 1;}100% {-webkit-transform-origin: left bottom;transform-origin: left bottom;-webkit-transform: rotate(-90deg);transform: rotate(-90deg);opacity: 0;}
}@keyframes rotateOutUpLeft {0% {-webkit-transform-origin: left bottom;-ms-transform-origin: left bottom;transform-origin: left bottom;-webkit-transform: rotate(0);-ms-transform: rotate(0);transform: rotate(0);opacity: 1;}100% {-webkit-transform-origin: left bottom;-ms-transform-origin: left bottom;transform-origin: left bottom;-webkit-transform: rotate(-90deg);-ms-transform: rotate(-90deg);transform: rotate(-90deg);opacity: 0;}
}.rotateOutUpLeft {-webkit-animation-name: rotateOutUpLeft;animation-name: rotateOutUpLeft;
}@-webkit-keyframes rotateOutUpRight {0% {-webkit-transform-origin: right bottom;transform-origin: right bottom;-webkit-transform: rotate(0);transform: rotate(0);opacity: 1;}100% {-webkit-transform-origin: right bottom;transform-origin: right bottom;-webkit-transform: rotate(90deg);transform: rotate(90deg);opacity: 0;}
}@keyframes rotateOutUpRight {0% {-webkit-transform-origin: right bottom;-ms-transform-origin: right bottom;transform-origin: right bottom;-webkit-transform: rotate(0);-ms-transform: rotate(0);transform: rotate(0);opacity: 1;}100% {-webkit-transform-origin: right bottom;-ms-transform-origin: right bottom;transform-origin: right bottom;-webkit-transform: rotate(90deg);-ms-transform: rotate(90deg);transform: rotate(90deg);opacity: 0;}
}.rotateOutUpRight {-webkit-animation-name: rotateOutUpRight;animation-name: rotateOutUpRight;
}@-webkit-keyframes slideInDown {0% {opacity: 0;-webkit-transform: translateY(-2000px);transform: translateY(-2000px);}100% {-webkit-transform: translateY(0);transform: translateY(0);}
}@keyframes slideInDown {0% {opacity: 0;-webkit-transform: translateY(-2000px);-ms-transform: translateY(-2000px);transform: translateY(-2000px);}100% {-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}
}.slideInDown {-webkit-animation-name: slideInDown;animation-name: slideInDown;
}@-webkit-keyframes slideInLeft {0% {opacity: 0;-webkit-transform: translateX(-2000px);transform: translateX(-2000px);}100% {-webkit-transform: translateX(0);transform: translateX(0);}
}@keyframes slideInLeft {0% {opacity: 0;-webkit-transform: translateX(-2000px);-ms-transform: translateX(-2000px);transform: translateX(-2000px);}100% {-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);}
}.slideInLeft {-webkit-animation-name: slideInLeft;animation-name: slideInLeft;
}@-webkit-keyframes slideInRight {0% {opacity: 0;-webkit-transform: translateX(2000px);transform: translateX(2000px);}100% {-webkit-transform: translateX(0);transform: translateX(0);}
}@keyframes slideInRight {0% {opacity: 0;-webkit-transform: translateX(2000px);-ms-transform: translateX(2000px);transform: translateX(2000px);}100% {-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);}
}.slideInRight {-webkit-animation-name: slideInRight;animation-name: slideInRight;
}@-webkit-keyframes slideOutLeft {0% {-webkit-transform: translateX(0);transform: translateX(0);}100% {opacity: 0;-webkit-transform: translateX(-2000px);transform: translateX(-2000px);}
}@keyframes slideOutLeft {0% {-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);}100% {opacity: 0;-webkit-transform: translateX(-2000px);-ms-transform: translateX(-2000px);transform: translateX(-2000px);}
}.slideOutLeft {-webkit-animation-name: slideOutLeft;animation-name: slideOutLeft;
}@-webkit-keyframes slideOutRight {0% {-webkit-transform: translateX(0);transform: translateX(0);}100% {opacity: 0;-webkit-transform: translateX(2000px);transform: translateX(2000px);}
}@keyframes slideOutRight {0% {-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);}100% {opacity: 0;-webkit-transform: translateX(2000px);-ms-transform: translateX(2000px);transform: translateX(2000px);}
}.slideOutRight {-webkit-animation-name: slideOutRight;animation-name: slideOutRight;
}@-webkit-keyframes slideOutUp {0% {-webkit-transform: translateY(0);transform: translateY(0);}100% {opacity: 0;-webkit-transform: translateY(-2000px);transform: translateY(-2000px);}
}@keyframes slideOutUp {0% {-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}100% {opacity: 0;-webkit-transform: translateY(-2000px);-ms-transform: translateY(-2000px);transform: translateY(-2000px);}
}.slideOutUp {-webkit-animation-name: slideOutUp;animation-name: slideOutUp;
}@-webkit-keyframes hinge {0% {-webkit-transform: rotate(0);transform: rotate(0);-webkit-transform-origin: top left;transform-origin: top left;-webkit-animation-timing-function: ease-in-out;animation-timing-function: ease-in-out;}20%, 60% {-webkit-transform: rotate(80deg);transform: rotate(80deg);-webkit-transform-origin: top left;transform-origin: top left;-webkit-animation-timing-function: ease-in-out;animation-timing-function: ease-in-out;}40% {-webkit-transform: rotate(60deg);transform: rotate(60deg);-webkit-transform-origin: top left;transform-origin: top left;-webkit-animation-timing-function: ease-in-out;animation-timing-function: ease-in-out;}80% {-webkit-transform: rotate(60deg) translateY(0);transform: rotate(60deg) translateY(0);opacity: 1;-webkit-transform-origin: top left;transform-origin: top left;-webkit-animation-timing-function: ease-in-out;animation-timing-function: ease-in-out;}100% {-webkit-transform: translateY(700px);transform: translateY(700px);opacity: 0;}
}@keyframes hinge {0% {-webkit-transform: rotate(0);-ms-transform: rotate(0);transform: rotate(0);-webkit-transform-origin: top left;-ms-transform-origin: top left;transform-origin: top left;-webkit-animation-timing-function: ease-in-out;animation-timing-function: ease-in-out;}20%, 60% {-webkit-transform: rotate(80deg);-ms-transform: rotate(80deg);transform: rotate(80deg);-webkit-transform-origin: top left;-ms-transform-origin: top left;transform-origin: top left;-webkit-animation-timing-function: ease-in-out;animation-timing-function: ease-in-out;}40% {-webkit-transform: rotate(60deg);-ms-transform: rotate(60deg);transform: rotate(60deg);-webkit-transform-origin: top left;-ms-transform-origin: top left;transform-origin: top left;-webkit-animation-timing-function: ease-in-out;animation-timing-function: ease-in-out;}80% {-webkit-transform: rotate(60deg) translateY(0);-ms-transform: rotate(60deg) translateY(0);transform: rotate(60deg) translateY(0);opacity: 1;-webkit-transform-origin: top left;-ms-transform-origin: top left;transform-origin: top left;-webkit-animation-timing-function: ease-in-out;animation-timing-function: ease-in-out;}100% {-webkit-transform: translateY(700px);-ms-transform: translateY(700px);transform: translateY(700px);opacity: 0;}
}.hinge {-webkit-animation-name: hinge;animation-name: hinge;
}/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */@-webkit-keyframes rollIn {0% {opacity: 0;-webkit-transform: translateX(-100%) rotate(-120deg);transform: translateX(-100%) rotate(-120deg);}100% {opacity: 1;-webkit-transform: translateX(0px) rotate(0deg);transform: translateX(0px) rotate(0deg);}
}@keyframes rollIn {0% {opacity: 0;-webkit-transform: translateX(-100%) rotate(-120deg);-ms-transform: translateX(-100%) rotate(-120deg);transform: translateX(-100%) rotate(-120deg);}100% {opacity: 1;-webkit-transform: translateX(0px) rotate(0deg);-ms-transform: translateX(0px) rotate(0deg);transform: translateX(0px) rotate(0deg);}
}.rollIn {-webkit-animation-name: rollIn;animation-name: rollIn;
}/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */@-webkit-keyframes rollOut {0% {opacity: 1;-webkit-transform: translateX(0px) rotate(0deg);transform: translateX(0px) rotate(0deg);}100% {opacity: 0;-webkit-transform: translateX(100%) rotate(120deg);transform: translateX(100%) rotate(120deg);}
}@keyframes rollOut {0% {opacity: 1;-webkit-transform: translateX(0px) rotate(0deg);-ms-transform: translateX(0px) rotate(0deg);transform: translateX(0px) rotate(0deg);}100% {opacity: 0;-webkit-transform: translateX(100%) rotate(120deg);-ms-transform: translateX(100%) rotate(120deg);transform: translateX(100%) rotate(120deg);}
}.rollOut {-webkit-animation-name: rollOut;animation-name: rollOut;
}

main.js中引入

import animated from './assets/css/animate.css';
//这里需要将样式用起来，
Vue.use(animated);

使用：

<template><div><div class="one content-box"><h1>这是第一屏</h1></div><div class="two content-box"><h1>这是第二屏</h1><!-- 触发一次 --><div class="news-box"><div class="box-item left" v-animate-onscroll="'animated flip'"><h2>左侧内容</h2></div><div class="box-item right" v-animate-onscroll="'animated fadeInUp'"><h2>右侧内容</h2></div></div></div><div class="three content-box"><!-- 来回触发 --><!-- 默认情况下，当一个元素滚动到视图中时，其对应的动画只会触发一次。但是，我们可以使用v-animate-onscroll.repeat代替后者，这样只要元素滚动到视图中，就会触发动画： --><h1>这是第三屏</h1><div class="news-box"><div class="box-item left" v-animate-onscroll.repeat="'animated swing'"><h2>左侧内容</h2></div><div class="box-item right" v-animate-onscroll.repeat="'animated flip'"><h2>右侧内容</h2></div></div><div class="news-box"><div class="box-item left" v-animate-onscroll.repeat="'animated swing'"><h2>左侧内容</h2></div><div class="box-item right" v-animate-onscroll.repeat="'animated flip'"><h2>右侧内容</h2></div></div></div></div>
</template><script>
export default {//初始化wow.jsmounted() {},
};
</script><style scoped>
.content-box {margin: 0;padding: 0;width: 100%;height: 850px;text-align: center;
}
h1 {margin: 0;font-size: 50px;
}
.news-box {display: flex;justify-content: space-around;
}
.box-item {width: 40%;height: 10rem;
}.left {background-color: rgb(93, 215, 211);
}
.right {background-color: rgb(98, 183, 222);
}
.one {background-color: lightcyan;
}
.two {background-color: rgb(239, 173, 173);
}
.three {background-color: rgb(187, 237, 187);
}
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.xdnf.cn/news/149114.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

Soul APP创始人张璐团队探讨新世代婚恋观：基于兴趣爱好的“轻相亲”正逐渐流行

Soul APP创始人张璐团队探讨新世代婚恋观：基于兴趣爱好的“轻相亲”正逐渐流行

近年来,随着社会经济的快速发展和文化观念的不断演变,婚恋观念正在经历显著变化。为深入了解当代年轻人对婚恋的态度与趋势,Soul APP创始人张璐团队与上海大学社会学青年研究团队合作,联合发布了《2024年青年婚恋观念及趋势调查报告》(以下简称“报告”)。该报告基于Soul APP用…
阅读更多...
qml PathView入门

qml PathView入门

PathView是一个用于在用户界面中沿着定义的路径显示和滚动项目的视图组件。它提供了丰富的定制选项&#xff0c;允许开发者创建复杂的动画效果和自定义的滚动行为&#xff0c;特别适用于需要展示非线性排列项目的场景&#xff0c;如图片轮播、自定义滚动菜单等。 一、主要属性 …
阅读更多...
[教程]如何在iPhone上启用中国移动/联通/电信RCS消息

[教程]如何在iPhone上启用中国移动/联通/电信RCS消息

目前 苹果已经在 iOS 18 中带来 RCS 富媒体消息的支持&#xff0c;该消息基于网络传递&#xff0c;用户可以通过 RCS 免费将消息发送到其他 iPhone 或 Android 设备。在苹果面向测试版用户推出的 iOS 18.1 Beta 版中&#xff0c;中国网络运营商包括中国移动、中国联通、中国电信…
阅读更多...
JavaSE - 面向对象编程05

JavaSE - 面向对象编程05

01 正则表达式 【1】概念&#xff1a;正则表达式是由一些特定字符组成的&#xff0c;代表的是一个规则。 【2】可以用来做什么&#xff1f; ① 用于校验数据格式的合法性 ② 用于在文本中爬取满足要求的内容 ③ 用于String类的replace方法&#xff0c;split方法的替换和分割 …
阅读更多...
【学习笔记】Linux系统基础知识3 —— cd命令详解

【学习笔记】Linux系统基础知识3 —— cd命令详解

一、前期准备 1.已经正确安装并成功进入Linux系统 说明&#xff1a;本实验采用的 Redhat 系统&#xff08;因系统不一致&#xff0c;可能部分显示存在差异&#xff09; 二、学习内容 提示&#xff1a;学习Linux系统基础命令 cd 命令详解 1、cd命令 1. 功能说明 cd 命令用…
阅读更多...
Simple Calculator(算法初阶，代码基础，“纯”手撕)

Simple Calculator(算法初阶，代码基础，“纯”手撕)

简单计算器&#xff1a;仅适用无括号加减乘除&#xff0c;算法初阶&#xff0c;代码基础&#xff0c;不调库或模块“纯”手撕。 (笔记模板由python脚本于2024年09月22日 12:08:02创建&#xff0c;本篇笔记适合喜欢用python解决实际问题的coder翻阅) 【学习的细节是欢悦的历程】…
阅读更多...
Qt中多语言的操作（以QtCreator为例）

Qt中多语言的操作（以QtCreator为例）

1、首先&#xff0c;我们在代码中与文本相关的且需要支持多语言的地方&#xff0c;用tr来包含多语言key&#xff08;多语言key是我们自己定义的&#xff09;&#xff0c;如下 //举例 QPushButton* btnnew QPushButton(this); btn->move(20,20); btn->resize(100,50); //…
阅读更多...
在 deepin 上除了 Steam，还能怎么玩游戏？

在 deepin 上除了 Steam，还能怎么玩游戏？

查看原文 前段时间&#xff0c;很多朋友在 deepin 23 上实现了《黑神话&#xff1a;悟空》的通关&#xff0c;那么除了通过 Steam 玩 Windows 游戏之外&#xff0c;还有其他可以使用的游戏平台吗&#xff1f; 回答&#xff0c;当然是可以哒&#xff01; 游戏平台介绍 今天介…
阅读更多...
RHCSA认证-Linux(RHel9)-Linux入门

RHCSA认证-Linux(RHel9)-Linux入门

文章目录 概要一、创建、查看和编辑⽂本1.1 输出重定向1.2 vim编辑器1.3 shell 变量1.5 获取帮助 二、管理本地用户和组2.1 描述用户2.2 切换用户和赋权2.3 用户管理2.4 用户组管理2.5 密码策略 三、控制文件访问3.1 列出文件和文件权限3.2 更改文件权限和拥有者3.3 控制默认权…
阅读更多...
昆明理工大学MBA工商管理上课方式

昆明理工大学MBA工商管理上课方式

--昆工MBA考研、管理与经济学院、125100工商管理、125602项目管理、199管理类综合能力、F009 政治、F008政治项目管理概论
阅读更多...
有关在.Net Core中以TEXT类型将Json格式字段存到数据库的学习

有关在.Net Core中以TEXT类型将Json格式字段存到数据库的学习

导言 在写个值日接口时发现值日表中的值日时段是可以分多段的&#xff0c;想了想可以使用Json类型来存&#xff0c;不过之前没接触过在后端操作Json格式存到数据库的情况&#xff0c;之后学也了解到了一下方法来实现&#xff0c;故记录一下。 过程 从前端到后端再到数据库的 JS…
阅读更多...
千亿大数据平台——MySQL大数据优化

千亿大数据平台——MySQL大数据优化

一、自增量的作用 1. 唯一性标识 - 为表中的每一行数据提供一个唯一的、自动生成的标识符&#xff0c;确保数据的唯一性和准确性。 2. 简化数据关联 - 在多个表之间进行关联操作时&#xff0c;自增量字段可以作为便捷的关联键&#xff0c;方便建立和维护表之间的关系…
阅读更多...
C#和数据库高级：虚方法

C#和数据库高级：虚方法

文章目录 一、抽象方法和抽象类中的思考1.1、回顾抽象方法的特点1.2、针对抽象方法问题的引出 二、虚方法的使用步骤2.1、虚方法重写方法的调用2.2、系统自带的虚方法2.3、重写Equals方法2.4、虚方法和抽象方法的比较 三、虚方法和抽象方法的联系3.1、ToString()方法的应用 一、…
阅读更多...
字母与符号检测系统源码分享

字母与符号检测系统源码分享

字母与符号检测检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Computer V…
阅读更多...
ChatGLM-6B-部署与使用

ChatGLM-6B-部署与使用

✨ Blog’s 主页: 白乐天_ξ( ✿&#xff1e;◡❛) &#x1f308; 个人Motto&#xff1a;他强任他强&#xff0c;清风拂山冈&#xff01; &#x1f4ab; 欢迎来到我的学习笔记&#xff01; 什么是ChatGLM-6B 一、简介 ChatGLM-6B 是由清华大学知识工程实验室&#xff08;KEG&…
阅读更多...
Python：百度贴吧实现自动化签到

Python：百度贴吧实现自动化签到

早知道&#xff0c;还是python。 Github项目仓库在这。 相关API 签到贴吧列表 签到分为两个接口&#xff0c;PC端签到一次经验2&#xff0c;而移动端签到则是一次经验6。该用哪个接口已经很明显了。不过这里还是列出PC端的签到API。 # PC端签到接口 # sign_url "https:…
阅读更多...
时序预测 | Python实现KAN+LSTM时间序列预测

时序预测 | Python实现KAN+LSTM时间序列预测

时序预测 | Python实现KAN+LSTM时间序列预测 目录 时序预测 | Python实现KAN+LSTM时间序列预测预测效果基本介绍程序设计预测效果 基本介绍 时序预测 | KAN+LSTM时间序列预测（Python） KAN作为这两年最新提出的机制，目前很少人用，很适合作为时间序列预测的创新点，可以结合…
阅读更多...
python全栈开发《37.列表（元组）的count函数》

python全栈开发《37.列表（元组）的count函数》

元组的count函数的功能和用法与列表的count函数完全一致。 1.count的功能 返回当前列表中某个成员的个数。 2.count的用法 fruits [苹果,西瓜,水蜜桃,西瓜,雪梨] count fruits.count(西瓜) print(count) 运行结果&#xff1a; 2 注意&#xff1a;列表的内置函数count拿到需要…
阅读更多...
【读书笔记-《30天自制操作系统》-24】Day25

【读书笔记-《30天自制操作系统》-24】Day25

本篇内容也比较简单。首先开发了蜂鸣器的API&#xff0c;然后增加更多的颜色显示。为了同时运行两个应用程序&#xff0c;又增加了一个命令行窗口。 1. 蜂鸣器 首先是增加蜂鸣器的功能。 蜂鸣器与定时器一样&#xff0c;是由PIT控制的。 蜂鸣器发声的控制&#xff1a; 音高…
阅读更多...
Linux：Bash中的文件描述符详解

Linux：Bash中的文件描述符详解

相关阅读 Linuxhttps://blog.csdn.net/weixin_45791458/category_12234591.html?spm1001.2014.3001.5482 Linux中的所有进程&#xff0c;都拥有自己的文件描述符(File Descriptor, FD)&#xff0c;它是操作系统在管理进程和文件时的一种抽象概念。每个文件描述符由一个非负整…
阅读更多...
最新文章

Copyright @ 2022~2023