精华内容
下载资源
问答
  • 因为自己的小站首页需要一个可以滑动切换的显示内容的功能,本来是用的swiper,但是坑,BUG实在是太多了,实在是搞不明白了,就这么个小功能还是决定自己写一个组件。 直接贴代码,基本都含有注释 <template> ...

    因为自己的小站首页需要一个可以滑动切换的显示内容的功能,本来是用的swiper,但是坑,BUG实在是太多了,实在是搞不明白了,就这么个小功能还是决定自己写一个组件。

    直接贴代码,基本都含有注释

    <template>
    <div 
        class="touch_tab_container"
        ref="TabContainerEl"
        :style="{
            height:height+'px',
        }"
        @touchmove="(e)=>{
            mouseMove(e.touches[0]);
        }"
        @touchstart="(e)=>{
            onMouseDown(e.touches[0]);
        }"
        @touchend="(e)=>{
            onMouseUp(e.touches[0]);
        }"
        @mousemove="mouseMove"
        @mouseleave="onMouseLeave"
        @mousedown="onMouseDown"
        @mouseup="onMouseUp">
        <div 
            :class="{
                container:true,
                animation:animation,
            }"
            ref="ContainerEl"
            :style="{
                transform:`translateX(${translateX}px)`,
            }">
            <slot></slot>
        </div>
    </div>
    </template>
    <script>
    //自定义touchTab组件
    export default {
        name:'TouchTab',
        data() {
            return {
                height:0,  //总容器高度
                TabContainerEl:undefined,  //总容器元素
                ContainerEl:undefined,
                tabItemEls:[],
                mouseDown:false,  //鼠标是否按下
                translateX:0,  //容器的偏移量
                animation:false,  //是否开启容器动画
                activeIndex:0,
                speed:0,  //移动速度
            };
        },
        computed:{
            translateX_:{  //translateX的代理层
                set(newValue){
                    if(!this.ContainerEl) return;
                    if(newValue > 0) return;
                    if(newValue < this.TabContainerEl.clientWidth-this.ContainerEl.clientWidth) return;
                    this.translateX = newValue;
                    if(this.mouseDown){  //如果鼠标按下的话计算移动速率
                        let oldTranslateX = this.oldTranslateX || newValue;
                        let oldDate = this.oldDate || new Date().getTime();
                        let newTranslateX = newValue;
                        let newDate =new Date().getTime();
                        this.speed =  Math.abs((newTranslateX - oldTranslateX)/(newDate - oldDate));
                        this.oldTranslateX = newTranslateX;
                        this.oldDate = newDate;
                    }
                },
                get(){
                    return this.translateX;
                },
            },
        },
        watch:{
            activeIndex:{  //当前选项发生变化时向外部暴露当前显示的选项索引
                handler(newVlaue){
                    this.$emit('onChange',newVlaue);
                },
                immediate:true,
            },
        },
        mounted(){
            this.TabContainerEl = this.$refs.TabContainerEl;
            this.ContainerEl = this.$refs.ContainerEl;
            this.tabItemEls = this.$refs.ContainerEl.children;
            this.setActiveEl(this.activeIndex);  //设置初始显示item
            const that = this;
            requestAnimationFrame(function func(){  //每一帧都计算样式
                that.computeStyle();
                requestAnimationFrame(func);
            });
        },
        methods:{
            mouseMove(e){  //鼠标移动事件
                if(!this.mouseDown) return;  //必须是鼠标按下
                this.animation = false;
                let clientX = e.clientX - this.lastEnven.clientX;
                this.translateX_ = this.translateX_ + clientX;
                this.lastEnven = e;
            },
            onMouseLeave(){  //鼠标移出事件
                this.mouseDown = false;
                this.lastEnven = undefined;
                this.computeIndex();
            },
            onMouseDown(e){  //鼠标按下事件
                this.mouseDown = true;
                this.lastEnven = e;
            },
            onMouseUp(){  //鼠标抬起事件
                this.mouseDown = false;
                this.lastEnven = undefined;
                this.computeIndex();
            },
            computeStyle(){  //计算样式
                if(this.tabItemEls.length>0){
                    this.tabItemEls.forEach(el => {  //设置子元素的宽度与总容器宽度一致
                        el.style.width = this.TabContainerEl.clientWidth+'px';
                        el.style.minWidth = this.TabContainerEl.clientWidth+'px';
                    });
                    this.height = this.tabItemEls[this.activeIndex].clientHeight;
                }
            },
            computeIndex(){  //计算索引位置
                let itemWidth = this.TabContainerEl.clientWidth;
                let translateX = Math.abs(this.translateX_);
                let width_ = itemWidth*this.activeIndex - translateX;
                let direction = width_>0?'left':'right';
                width_ = Math.abs(width_);
                if(width_>(itemWidth/2)){  //如果滑动超过了一半
                    this.setActiveEl(
                        direction=='right'?this.activeIndex+1:this.activeIndex-1,
                    );
                }else if(this.speed>0.5){  //表示没有超过一半,可以通过滑动速率和方向判断
                    this.setActiveEl(
                        direction=='right'?this.activeIndex+1:this.activeIndex-1,
                    );
                }else{
                    this.setActiveEl(this.activeIndex);
                }
                this.speed = 0;
            },
            setActiveEl(index){  //设置当前显示的item(可外部调用)
                this.animation = true;
                if(index<=0){
                    this.activeIndex = 0;
                }else if(index>(this.tabItemEls.length-1)){
                    this.activeIndex = this.tabItemEls.length-1;
                }else{
                    this.activeIndex = index;
                }
                this.translateX_ = -this.TabContainerEl.clientWidth * this.activeIndex;
            },
        },
    }
    </script>
    <style lang="scss" scoped>
    .touch_tab_container{
        width: 100%;
        margin: 0 auto;
        background-color: aquamarine;
        border-radius: 5px;
        height: fit-content;
        overflow: hidden;
        transition: height 0.2s;
        >.container{
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            width:fit-content;
            display: flex;
            transform: translateX(0px);
            >.item{
                min-width: 0;
                width: 0;
                height: fit-content;
            }
        }
        .animation{
            transition: all 0.2s;
            transition-timing-function: cubic-bezier(0.69, 0.05, 0.24, 1.01);
        }
    }
    </style>
    

    使用方法

    <myComponent
    	ref="myComponent"
    	@onChange="onChange">
    </myComponent>
    
    //直接设置显示那个选项
    this.$refs.myComponent.setActiveEl(1);
    

    示例,首页这里的滑动翻页就是这种形式

    展开全文
  • vue中单页面滑动

    2019-01-29 17:58:02
    vue中单页面滑动 全局滚动插件fullPage.js http://www.360doc.com/content/14/1203/08/19812575_430009823.shtml(jquery) https://daneden.github.io/animate.css/(里面的动画) 1、main.js中引入文件 // ...

    vue中单页面滑动
    全局滚动插件fullPage.js
    http://www.360doc.com/content/14/1203/08/19812575_430009823.shtml(jquery)
    https://daneden.github.io/animate.css/(里面的动画)
    一、main.js中引入文件

    // fullpage滑动翻页
    import 'animate.css'
    import 'vue-fullpage/vue-fullpage.css'
    import VueFullpage from 'vue-fullpage'
    Vue.use(VueFullpage)
    

    二、页面

    <template>
      <div class="fullpage-container" @touchstart="showDeleteButton" >
        <!--@touchend="clearLoop"-->
        <div class="bjlisten">
          <div class="stop" id="off" >
            <img src="/static/endYear/stopYy.png" class="rota" id="music-iocn" alt="旋转">
          </div>
          <!--去掉autoplay取消自动播放-->
          <audio id="audio" src="/static/endYear/wlzy.mp3"  loop></audio>
        </div>
    
        <div class="fullpage-wp" v-fullpage="opts">
          <!-- 1-->
          <div class="page-1 page">
            <div class="part-1 clearfix" v-animate="{value: 'fadeInDown', delay: 800}">
              <!--<img :src="imgPaht + '/static/endYear/1.jpg'">-->
              <img src="/static/endYear/tex1.png">
            </div>
            <div class="part-2 clearfix" v-animate="{value: 'zoomIn', delay: 200}">
              <img src="/static/endYear/earth1.png">
              <div class="shareImage-icon" v-animate="{value: 'pluse', delay: 200}">
                <img v-if="shopInfo && shopInfo.darenIcon" :src="getPicImageUrl(shopInfo.darenIcon)"/>
                <img v-else src="/static/images/shophome-heart.png"/>
                <div class="clearfix">{{shopInfo.darenName}}</div>
              </div>
            </div>
            <div class="part-3 clearfix" v-animate="{value: 'fadeInLeft', delay: 400}">
              <img src="/static/endYear/but1.png">
            </div>
            <div class="arrow clearfix">
              <img src="/static/endYear/arrow.png">
            </div>
          </div>
          <!--2-->
          <div class="page-2 page">
            <div class="part-1 clearfix" v-animate="{value: 'fadeInLeft', delay: 400}">
              <div v-if="shopInfo.becomeDarenTime">
                <span v-if="shopInfo.becomeDarenTime[0]">{{shopInfo.becomeDarenTime[0]}}年</span>
                <span v-if="shopInfo.becomeDarenTime[1]">{{shopInfo.becomeDarenTime[1]}}月</span>
                <span v-if="shopInfo.becomeDarenTime[2]">{{shopInfo.becomeDarenTime[2]}}日</span>
              </div>
              <div>我加入了红人超市,</div>
              <div>生活中又多了一件热爱的事,</div>
              <div>这一刻,我与红人超市故事正式开始。</div>
            </div>
            <div class="part-2 clearfix">
              <img src="/static/endYear/earth2.png">
            </div>
            <div class="part-3 clearfix" v-animate="{value: 'pulse', delay: 200}">
              <img src="/static/endYear/goods2.png">
            </div>
            <div class="part-4 clearfix" >
              <!--<div class="tex1">好礼贺岁活动进行中</div>-->
              <div class="tex1">海量进口好货</div>
              <img class="shareGoodsTwo" id="qr" :src="qr"/>
              <!--<div class="tex2">扫码享受贺岁福利</div>-->
              <div class="tex2">扫码买遍全球</div>
            </div>
            <div class="arrow clearfix">
              <img src="/static/endYear/arrow.png">
            </div>
            <div class="showPic" id="showPicBox">
              <iframe id="picIfr"  scrolling="yes" frameborder="0"></iframe>
              <div class="closePicBox" v-on:click="closePicBox">返回</div>
            </div>
          </div>
          <!--3-->
          <div class="page-3 page" v-if="saleNum>0">
            <div class="part-1 clearfix" v-animate="{value: 'fadeInLeft', delay: 400}">
              <div>在
              <p v-html="test(firstInfoTime)">{{firstInfoTime}}日</p>
              </div>
              <div>我的店铺迎来的了第一笔订单,</div>
              <p v-if="topProductName.length>15">{{topProductName.substring(0,16)}}...</p>
              <p v-else>{{topProductName}}</p>
              <div>这个必入好物,我有给您种草么?</div>
            </div>
            <div class="part-2 clearfix"  v-animate="{value: 'zoomIn', delay: 2200}">
              <img src="/static/endYear/star3.png">
            </div>
            <div class="part-3 clearfix">
              <img src="/static/endYear/center3.png">
            </div>
            <div class="part-4 clearfix">
              从此挣钱不再难
            </div>
            <div class="part-5 clearfix">
              <!--<div class="tex1">好礼贺岁活动进行中</div>-->
              <div class="tex1">海量进口好货</div>
              <img class="shareGoodsTwo" :src="qr"/>
              <!--<div class="tex2">扫码享受贺岁福利</div>-->
              <div class="tex2">扫码买遍全球</div>
            </div>
            <div class="arrow clearfix">
              <img src="/static/endYear/arrow.png">
            </div>
          </div>
          <!--4-->
          <div class="page-4 page" v-if="saleNum>0" >
            <div class="part-1 clearfix" v-animate="{value: 'fadeInLeft', delay: 400}">
              <div>全年我的店铺合计销售了
                <p>{{saleNum?saleNum:0}}</p>
                件商品,</div>
              <div v-if="productType">
                <p>{{productType}}</p>
                类商品最受大家追捧,</div>
              <p v-if="firstProductName && firstProductName.length>15">{{firstProductName.substring(0,16)}}...</p>
              <p v-else-if="firstProductName">{{firstProductName}}</p>
              <div v-if="firstProductName">是本店最爆款!</div>
            </div>
            <div class="part-2 clearfix">
              <img src="/static/endYear/goods44.png">
              <div class="part66 clearfix">
                <div class="mzType clearfix">美妆类{{mzNum ? mzNum : 0}}件</div>
                <div class="bjType clearfix">保健类{{bjNum ? bjNum : 0}}件</div>
                <div class="myType clearfix">母婴类{{myNum ? myNum : 0}}件</div>
                <div class="ghType clearfix">个护类{{ghNum ? ghNum : 0}}件</div>
                <div class="qtType clearfix">其他类{{saleNum - (mzNum ? mzNum : 0) - (bjNum ? bjNum : 0) - (myNum ? myNum : 0) - (ghNum ? ghNum : 0)}}件</div>
              </div>
            </div>
            <div class="part-3 clearfix" v-animate="{value: 'bounceIn', delay: 200}">
              <img src="/static/endYear/house4.png">
            </div>
            <div class="part-4 clearfix">
              人间POS机称号并非浪得虚名~
            </div>
            <div class="part-5 clearfix">
              <!--<div class="tex1">好礼贺岁活动进行中</div>-->
              <div class="tex1">海量进口好货</div>
              <img class="shareGoodsTwo" :src="qr"/>
              <!--<div class="tex2">扫码享受贺岁福利</div>-->
              <div class="tex2">扫码买遍全球</div>
            </div>
            <!--<div class="part-6 clearfix">-->
              <!--<div class="mzType clearfix">美妆类{{mzNum ? mzNum : 0}}件</div>-->
              <!--<div class="bjType clearfix">保健类{{bjNum ? bjNum : 0}}件</div>-->
              <!--<div class="myType clearfix">母婴类{{myNum ? myNum : 0}}件</div>-->
              <!--<div class="ghType clearfix">个护类{{ghNum ? ghNum : 0}}件</div>-->
              <!--<div class="qtType clearfix">其他类{{saleNum - (mzNum ? mzNum : 0) - (bjNum ? bjNum : 0) - (myNum ? myNum : 0) - (ghNum ? ghNum : 0)}}件</div>-->
            <!--</div>-->
            <div class="arrow clearfix">
              <img src="/static/endYear/arrow.png">
            </div>
          </div>
          <!--5-->
          <div class="page-5 page">
            <div class="part-1 clearfix" v-animate="{value: 'fadeInLeft', delay: 400}">
              <div v-if="saleNum>0">越努力,越幸运,</div>
              <div v-else>这一年,我的小店销售额</div>
    
              <div v-if="saleNum>0">我的小店销售额超越了商城</div>
              <div v-else>超越了<p>{{percentage?percentage:'0%'}}</p>的店主</div>
    
              <div v-if="saleNum>0">
                <p>{{percentage?percentage:'0%'}}</p>的人!
              </div>
              <div v-else>只要继续有您的支持</div>
    
              <div v-if="saleNum>0">在红人超市开店,实现我的小目标!</div>
              <div v-else>明年必能再创一个小巅峰!</div>
            </div>
            <div class="part-2 clearfix" >
              <img src="/static/endYear/person5.png">
            </div>
            <div class="part-3 clearfix" v-animate="{value: 'zoomIn', delay: 200}">
              <img src="/static/endYear/star5.png">
            </div>
            <div class="part-4 clearfix">
              今年不再进贡给马爸爸,手脚双全了
            </div>
            <div class="part-5 clearfix">
              <!--<div class="tex1">好礼贺岁活动进行中</div>-->
              <div class="tex1">海量进口好货</div>
              <img class="shareGoodsTwo" :src="qr"/>
              <!--<div class="tex2">扫码享受贺岁福利</div>-->
              <div class="tex2">扫码买遍全球</div>
            </div>
            <div class="arrow clearfix">
              <img src="/static/endYear/arrow.png">
            </div>
          </div>
          <!--6-->
          <div class="page-6 page">
            <div class="part-1 clearfix" v-animate="{value: 'fadeInLeft', delay: 400}">
              <div>快递小哥马不停蹄,日夜兼程,</div>
              <div>为我的上帝们奔走全国各地,配送订单</div>
              <div>
                走遍了全国<p>{{provinceNum ? provinceNum :0}}</p>个省,
                <p>{{cityNum ? cityNum: 0}}</p>个市!
              </div>
            </div>
            <div class="part-2 clearfix">
              <div class="echarts">
                <div :style="{height:'600px',width:'1050px'}" ref="myEchart"></div>
              </div>
              <!--<img src="/static/endYear/earch6.png">-->
            </div>
            <div class="part-3 clearfix" v-animate="{value: 'zoomIn', delay: 200}">
              <img src="/static/endYear/star6.png">
            </div>
            <div class="part-4 clearfix">
              哈哈,看!这是朕打下的江山
            </div>
            <div class="part-5 clearfix">
              <!--<div class="tex1">好礼贺岁活动进行中</div>-->
              <div class="tex1">海量进口好货</div>
              <img class="shareGoodsTwo" :src="qr"/>
              <!--<div class="tex2">扫码享受贺岁福利</div>-->
              <div class="tex2">扫码买遍全球</div>
            </div>
            <div class="arrow clearfix">
              <img src="/static/endYear/arrow.png">
            </div>
          </div>
          <!--7-->
          <div class="page-7 page">
            <div class="part-1 clearfix" v-animate="{value: 'fadeInLeft', delay: 400}">
              <div>这一年,</div>
              <div>
                共有<p>{{shopInfo.totalViewerByShop?shopInfo.totalViewerByShop:0}}</p>人来访过我的小店,
              </div>
              <div>其中,</div>
              <div>
                有<p>{{shopInfo.totalBuyerByShop?shopInfo.totalBuyerByShop:0}}</p>人在店里购买了商品。
              </div>
            </div>
            <div class="part-2 clearfix">
              <img src="/static/endYear/center7.png">
            </div>
            <div class="part-3 clearfix" v-animate="{value: 'flash', delay: 200}">
              <img src="/static/endYear/goods7.png" >
            </div>
            <div class="part-4 clearfix" v-animate="{value: 'fadeInLeft', delay: 800}">
              我也是有当流量明星的潜质哦~
            </div>
            <div class="part-5 clearfix">
              <!--<div class="tex1">好礼贺岁活动进行中</div>-->
              <div class="tex1">海量进口好货</div>
              <img class="shareGoodsTwo" :src="qr"/>
              <!--<div class="tex2">扫码享受贺岁福利</div>-->
              <div class="tex2">扫码买遍全球</div>
            </div>
            <div class="arrow clearfix">
              <img src="/static/endYear/arrow.png">
            </div>
          </div>
          <!--8-->
          <div class="page-8 page">
            <div class="part-1 clearfix" v-animate="{value: 'fadeInLeft', delay: 400}">
              <img src="/static/endYear/tex8.png">
            </div>
            <div class="part-2 clearfix">
              <!--<a href="/src/components/enYear/enYear">-->
                <!--<img src="/static/endYear/btn8-1.png">-->
              <!--</a>-->
              <a @click="endYearIcon()">
                <img src="/static/endYear/btn8-1.png">
              </a>
            </div>
            <div class="part-3 clearfix">
              <a @click="endHome()">
                <!--<img src="/static/endYear/btn8-2.png">-->
                <img src="/static/endYear/btn8-sy.png">
              </a>
              <!--<router-link :to="{ name: `home`}">-->
                <!--<img src="/static/endYear/btn8-2.png">-->
              <!--</router-link>-->
            </div>
            <div class="part-4 clearfix">
              <img src="/static/endYear/center8.png">
            </div>
            <div class="part-5 clearfix" v-animate="{value: 'zoomIn', delay: 200}">
              <img src="/static/endYear/star8.png">
            </div>
            <div class="part-6 clearfix">
              <img src="/static/endYear/logo8.png">
            </div>
            <div class="part-7 clearfix">
              <!--<img src="/static/endYear/tex8-2.png">-->
              <img src="/static/endYear/tex8-sy.png">
            </div>
            <div class="part-8 clearfix">
              <img class="shareGoodsTwo" :src="qr"/>
            </div>
          </div>
        </div>
      </div>
    </template>
    <script>
      import {mapState} from 'vuex'
      import Api from '../../api/user/userInfo'
      import qr from 'qrcode'
      import wx from 'weixin-js-sdk'
      import {Toast} from 'mint-ui'
      import echarts from 'echarts'
      import '../../../node_modules/echarts/map/js/china.js' // 引入中国地图数据
    
      // 获取url参数
      const getQueryString = function (name) {
        var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
        var r = location.search.substr(1).match(reg)
        if (r != null) return decodeURI(r[2])
        return null
      }
    
      export default {
        props: ['userJson'],
        data () {
          return {
            audio: {},
            chart: null,
            qr: '',   // 生成的二维码BASE64
            shopInfo: {},   // 店铺名
            productType: '',  // 卖的最多的商品类
            saleNum: 0, // 总销量
            topSale: '', // 里面的商品都是排第一的
            firstProductName: '', // 里面的商品都是排第一的
            topProductName: '',   // 第一笔单商品
            firstInfoTime: 0,   // 第一笔单商品时间
            mzNum: 0,     // 美妆销售量
            bjNum: 0,     // 保健销售量
            myNum: 0,     // 母婴销售量
            ghNum: 0,     // 个护销售量
            percentage: '',  // 百分比
            cityNum: '',  // 市
            provinceNum: '',  // 省
            provinceList: '',  // 省列表
            myLinkcode: '',   // 进入首页带daren或者report
            status: false,
            // shareIcon: location.href.split('#')[0] + '/static/endYear/shareIcon.jpg',  // 分享出去的icon
            shareIcon: 'http://' + window.location.host + '/static/endYear/shareIcon.jpg',  // 分享出去的icon
            report: getQueryString('report') || this.$route.query.report || this.$route.params.report || false,
            opts: {
              start: 0,
              dir: 'v',
              duration: 500,
              onLeave: function (prev, next, direction) {
                // alert(direction)
                if (direction === 'down') {
                  this.fullpage.moveTo(next)
                }
              }
            }
          }
        },
        computed: mapState('user', {
          userType: state => state.userType,
          darenId: state => state.lastVisitedDarenId
        }),
        methods: {
          // 开始按
          showDeleteButton() {
            var This = this
            clearTimeout(This.Loop)
            this.Loop = setTimeout(function() {
              let test
              if (This.report === false) {
                test = This.darenId
              } else {
                test = This.report
              }
              console.log(`http://${location.host}` + This.$route.path)
              console.log(This.$route.path)
              console.log(('/endYear/endYear/' + test))
              console.log(This.myLinkcode)
              // if (This.$route.path !== ('/endYear/endYear/' + test)) {
              if ((`http://${location.host}` + This.$route.path) === This.myLinkcode) {
                This.audio.pause()
              }
            }, 5000)
          },
          clearLoop() {
            clearTimeout(this.Loop)
          },
    
          playYy() {
            let that = this
            window.onload = function() {
              // 解决不同浏览器不能播放的情况
              // function toggleSound() {
              //      if (audio.paused) { //判读是否播放
              //           audio.play(); //没有就播放
              //      }
              //          }
              // toggleSound();
              (function() {
                that.audio = document.getElementById('audio')
                var musiIocn = document.getElementById('music-iocn')
                var off = document.getElementById('off')
                console.log(that.audio)
                off.onclick = function() {
                  if (off.className === 'paly') {    // 如果当前播放
                    that.audio.pause()                     // 停止(暂停)
                    off.className = 'stop'            // 暂停
                    musiIocn.src = 'static/endYear/stopYy.png'  // 暂停图片
                    musiIocn.className = ''                     // 取消图片360旋转CSS3动画
                  } else if (off.className === 'stop') {       // 如果当前暂停
                    that.audio.play()                              // 开始播放
                    off.className = 'paly'                    // 开始播放
                    musiIocn.src = 'static/endYear/startYy.gif' // 播放图片
                    musiIocn.className = 'rota'                // 追加图片360旋转CSS3动画
                  }
                }
                window.onunload = function () {
                  return this.audio.pause()
                }
                window.onbeforeunload = function () {
                  return this.audio.pause()
                }
              })()
            }
          },
          chinaConfigure() {
            console.log(this.userJson)
            let myChart = echarts.init(this.$refs.myEchart) // 这里是为了获得容器所在位置
            window.onresize = myChart.resize
            myChart.setOption({ // 进行相关配置
              backgroundColor: 'transparent',
              tooltip: {
                //   show: false //不显示提示标签
                formatter: '{b}', // 提示标签格式
                backgroundColor: '#ff7f50',  // 提示标签背景颜色
                textStyle: {color: '#fff'}  // 提示标签字体颜色
              },
              series: [{
                type: 'map',
                mapType: 'china',
                label: {
                  normal: {
                    show: true, // 显示省份标签
                    textStyle: {color: '#333'}  // 省份标签字体颜色
                  },
                  emphasis: {  // 对应的鼠标悬浮效果
                    show: true,
                    textStyle: {color: '#d5c3f4'}
                  }
                },
                itemStyle: {
                  normal: {
                    borderWidth: 0.5, // 区域边框宽度
                    borderColor: '#fff', // 区域边框颜色
                    areaColor: '#d5c3f4' // 区域颜色
                  },
                  emphasis: {
                    borderWidth: 0.5,
                    borderColor: '#4b0082',
                    areaColor: '#ff297f'
                  }
                },
                // data:[
                //   {name:'福建', selected:true}//福建为选中状态
                // ],
                data: this.provinceList
              }]
            })
            // myChart.setOption(option);
            // myChart.on('mouseover', function (params) {
            //   var dataIndex = params.dataIndex;
            //   console.log(params);
            // });
          },
          initShare() {
            // TODO 期待抽离
            // 设置微信分享信息
            wx.ready(() => {
              let myLink
              if (this.report === false) {
                myLink = `http://${location.host}/static/html/redirect.html?redirect=${encodeURIComponent(
                  `http://${location.host}/#/endYear/endYear/${this.darenId}`
                )}`
              } else {
                myLink = `http://${location.host}/static/html/redirect.html?redirect=${encodeURIComponent(
                  `http://${location.host}/#/endYear/endYear/${this.report}`
                )}`
              }
              console.log(myLink)
              wx.onMenuShareTimeline({
                title: `邀您来搭乘我的“红人时光机”`, // 分享标题
                link: myLink,
                // imgUrl: this.getPicImageUrl(this.shopInfo.darenIcon, '180x180') || this.shopLogo, // 分享图标
                // imgUrl: this.shareIcon || this.shopLogo, // 分享图标
                imgUrl: this.getPicImageUrl(this.shareIcon, '180x180') || this.shopLogo, // 分享图标
                success: function () {
                  // 用户确认分享后执行的回调函数
                  Toast('分享成功')
                },
                cancel: function () {
                }
              })
    
              wx.onMenuShareAppMessage({
                title: `邀您来搭乘我的“红人时光机”`, // 分享标题
                desc: '查看您助力小店达成哪些“成就”。2018,感恩有您!', // 分享描述
                link: myLink,
                imgUrl: this.getPicImageUrl(this.shareIcon, '180x180') || this.shopLogo, // 分享图标
                success: function () {  // 用户确认分享后执行的回调函数
                  Toast('分享成功')
                },
                cancel: function () {
                }
              })
            })
          },
          endYearIcon() {
            this.$fullpage.moveTo(0)
          },
          endHome() {
            // if (this.report === false) {
            //   this.myLinkcode = `http://${location.host}/?darenId=${
            //     this.darenId
            //     }`
            // } else {
            //   this.myLinkcode = `http://${location.host}/?darenId=${
            //     this.report
            //     }`
            // }
            window.location.href = this.myLinkcode //  跳转链接
            // window.location.href = 'http://' + location.host //  跳转链接
            // window.location.href = 'http://redmarket.topgoods.mobi/#/home' ///  跳转链接
          },
          // 二维码
          initShareImg() {
            qr.toDataURL(
            this.myLinkcode,
              // `${location.href.split('#')[0]}#/home/activity2?targetId=${this.targetId}&darenId=${this.darenId}`,
              // `${location.href.split('#')[0]}#/annual?darenId=${this.darenId}`,
              {errorCorrectionLevel: 'M'},
              (err, url) => {
                if (err) throw err
                if (url !== null && url !== undefined) {
                  this.qr = url
                }
              }
            )
          },
          closePicBox () {
            document.getElementById('showPicBox').style.display = 'none'
            document.getElementById('picIfr').src = ''
          },
          // 时间戳转北京时间
          test: function (date1) {
            var date = new Date(new Date(date1))
            var month = (date.getMonth() + 1) > 9 ? (date.getMonth() + 1) : '0' + (date.getMonth() + 1)
            var day = (date.getDate()) > 9 ? (date.getDate()) : '0' + (date.getDate())
            let timeDown = month + '月' + day + '日 '
            return timeDown
          },
          // 年度报告书
          endReport() {
            let reportId
            if (this.report === false) {
              reportId = this.darenId
            } else {
              reportId = this.report
            }
    
            Api.endReport(reportId).then(res => {
              this.initShare()
              this.shopInfo = res.data.data
              if (this.shopInfo && this.shopInfo.becomeDarenTime) {
                // this.shopInfoTime = this.shopInfo.becomeDarenTime
                this.shopInfo.becomeDarenTime = /\d{4}-\d{1,2}-\d{1,2}/g.exec(this.shopInfo.becomeDarenTime).join().split('-')     // 生产开始去除日期的时分秒
              }
              if (this.shopInfo && this.shopInfo.darenSaleNum) {
                this.saleNum = this.shopInfo.darenSaleNum.darenSaleNum  // 总销量
              }
    
              if (this.shopInfo.productTypeList[0] && this.shopInfo.productTypeList[0].typeName) {
                this.productType = this.shopInfo.productTypeList[0].typeName // 卖的最多的商品类
              }
              if (this.shopInfo && this.shopInfo.darenSaleNum && this.shopInfo.darenSaleNum.topSaleProductList[0] && this.shopInfo.darenSaleNum.topSaleProductList[0].productName) {
                this.firstProductName = this.shopInfo.darenSaleNum.topSaleProductList[0].productName // 里面的商品都是排第一的
              }
              // 3
              if (this.shopInfo.firstDealInfo && this.shopInfo.firstDealInfo.productName && this.shopInfo.firstDealInfo.payTime && this.shopInfo.firstDealInfo.payTime.time) {
                // this.shopInfoTime = this.shopInfo.becomeDarenTime
                this.firstInfoTime = this.shopInfo.firstDealInfo.payTime.time     // 第一笔单商品时间
                this.topProductName = this.shopInfo.firstDealInfo.productName   // 第一笔单商品
              }
              // 4
              if (this.shopInfo.productTypeList) {
                for (var i = 0; i < this.shopInfo.productTypeList.length; i++) {
                  if (this.shopInfo.productTypeList[i].typeName.substring(0, 2) === '美妆') {
                    this.mzNum = this.shopInfo.productTypeList[i].saleNum
                  }
                  if (this.shopInfo.productTypeList[i].typeName.substring(0, 2) === '美食') {
                    this.bjNum = this.shopInfo.productTypeList[i].saleNum
                  }
                  if (this.shopInfo.productTypeList[i].typeName.substring(0, 2) === '母婴') {
                    this.myNum = this.shopInfo.productTypeList[i].saleNum
                  }
                  if (this.shopInfo.productTypeList[i].typeName.substring(0, 2) === '家居') {
                    this.ghNum = this.shopInfo.productTypeList[i].saleNum
                  }
                }
              }
              // 5
              if (this.shopInfo.percentage) {
                this.percentage = this.shopInfo.percentage   // 百分比
              }
              // 7
              if (this.shopInfo.cityMap.provinceInfoList) {
                this.provinceNum = this.shopInfo.cityMap.provinceInfoList.length
                this.provinceList = this.shopInfo.cityMap.provinceInfoList
                console.log(this.provinceList)
                this.chinaConfigure()
              }
              if (this.shopInfo.cityMap.cityInfoList) {
                this.cityNum = this.shopInfo.cityMap.cityInfoList.length
              }
    
              // this.invitedImg=res.data
            }).catch((e) => {
              // reportId 或 darenId 异常
              // this.endHome()
              console.log(e)
              alert('err')
            })
          }
        },
        created () {
          this.endReport()
          this.test()
          this.playYy()
          console.log(this.myLinkcode)
    
          // 返回上一页
          window.addEventListener('popstate', function () {
            window.history.go(-2)
          })
          // 微信上滑问题
          document.body.addEventListener('touchmove', function(e) {
            e.preventDefault()
          }, {
            passive: false
          })
        },
        mounted () {
          console.log(this.audio)
          console.log(11111111)
          if (this.report === false) {
            this.myLinkcode = `http://${location.host}/?darenId=${
              this.darenId
              }`
            // this.myLinkcode = `${location.href.split('#')[0]}#/annual?darenId=${this.darenId}`
          } else {
            this.myLinkcode = `http://${location.host}/?darenId=${
              this.report
              }`
            // this.myLinkcode = `${location.href.split('#')[0]}#/annual?darenId=${this.report}`
          }
    
          setTimeout(() => {
            this.initShareImg()
          }, 2000)
        },
        beforeDestroy() {
          if (!this.chart) {
            return
          }
          this.chart.dispose()
          this.chart = null
        }
      }
    </script>
    <style scoped>
      /*背景音乐*/
      .bjlisten{
        width: 100px;
        height: 100px;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 99;
      }
      #music-iocn{
        width: auto;
      }
      #off{
        width: 100px;
        height: 100px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
      }
       /*微信上滑问题*/
      html,body,#app,.wx-pages{
        padding: 0;
        margin: 0;
        height: 100%;
        overflow: hidden;
        -webkit-overflow-scrolling: touch;
      }
       /*地图*/
       #china-map {
         width:1000px; height: 1000px;margin: auto;
       }
    </style>
    
    <style lang="less">
      @import "../../assets/page.less";
      *{
        color: #ffffff;
      }
      .fullpage-container {
        position: fixed!important;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        img {
          width: 100%;
        }
        .arrow {
          width: (56 / @rem750_p * 100%);
          left: (347 / @rem750_p * 100%);
          bottom: (10 / @rem1134_p * 100%);
          animation: arrow 1s linear infinite;
          -webkit-animation: arrow 1s linear infinite;
        }
        @keyframes arrow {
          0% {
            transform: translate3d(0, 0, 0);
          }
          70% {
            transform: translate3d(0, -20%, 0);
          }
          100% {
            transform: translate3d(0, 0, 0);
          }
        }
    
        @-webkit-keyframes arrow {
          0% {
            -webkit-transform: translate3d(0, 0, 0);
          }
          70% {
            -webkit-transform: translate3d(0, -20%, 0);
          }
          100% {
            -webkit-transform: translate3d(0, 0, 0);
          }
        }
        .page {
          position: relative;
        }
        .page-1 {
          background: url("/static/endYear/bg1.jpg");
          background-size: 100% 100%;
          .part-1 {
            width: (460 / @rem750_p * 100%);
            left: (50 / @rem750_p * 100%);
            top: (66 / @rem1134_p * 100%);
          }
          .part-2 {
            width: (660 / @rem750_p * 100%);
            left: 0;
            top: (315 / @rem1134_p * 100%);
            .shareImage-icon {
              position: absolute;
              width: 100%;
              left: (357 / @rem750_p * 100%);
              bottom: (207 / @rem1134_p * 100%);
              img{
                width: 120px;
                height: 120px;
                border-radius: 100%;
                border: solid 5px #fff;
                margin-bottom: 24px;
                font-size: 30px;
                box-sizing: border-box;
              }
              div{
                color: #fff;
                width: (300 / @rem750_p * 100%);
                left: (-80 / @rem750_p * 100%);
                display: inline-flex;
                justify-content: center;
              }
            }
          }
          .part-3 {
            width: (600 / @rem750_p * 100%);
            left: (75 / @rem750_p * 100%);
            bottom: (156 / @rem1134_p * 100%);
          }
        }
        .page-2 {
          background: url("/static/endYear/bg2.png");
          background-size: 100% 100%;
          .part-1 {
            position: relative;
            width: (623 / @rem750_p * 100%);
            left: (59 / @rem750_p * 100%);
            top: (65 / @rem1134_p * 100%);
            div:nth-of-type(1) span{
              font-size: 40px;
              line-height: 56px;
              color: #ff297f;
            }
            div:not(first){
              font-size: 30px;
              line-height: 56px;
              color: #ffffff;
            }
          }
          .part-2 {
            position: relative;
            width: 120%;
            right: (-68 / @rem750_p * 100%);
            bottom: (-115 / @rem1134_p * 100%);
          }
          .part-3 {
            width: (608 / @rem750_p * 100%);
            left: (40 / @rem750_p * 100%);
            top: (372 / @rem1134_p * 100%);
          }
          .part-4 {
            width: (164 / @rem750_p * 100%);
            left: (555 / @rem750_p * 100%);
            bottom: (36 / @rem1134_p * 100%);
            font-size: 17px;
            color: #fff;
            img{
              width: 90%;
              display: block;
              margin: 10px 0;
              right: 0;
            }
            .tex1{
              text-align: center;
              position: relative;
              bottom: (212 / @rem1134_p * 100%);
            }
            .tex2{
              text-align: center;
              position: relative;
            }
          }
        }
        .page-3 {
          background: url("/static/endYear/bg3.png");
          background-size: 100% 100%;
          .part-1 {
            position: relative;
            width: (672 / @rem750_p * 100%);
            left: (59 / @rem750_p * 100%);
            top: (70 / @rem1134_p * 100%);
            p:first-child{
              display: inline-block;
            }
            p{
              font-size: 40px;
              line-height: 56px;
              color: #ff297f;
            }
            div:not(first){
              font-size: 30px;
              line-height: 56px;
              color: #ffffff;
            }
          }
          .part-2 {
            width: (604 / @rem750_p * 100%);
            left: (67 / @rem750_p * 100%);
            top: (304 / @rem1134_p * 100%);
          }
          .part-3 {
            width: (618 / @rem750_p * 100%);
            left: (78 / @rem750_p * 100%);
            top: (344 / @rem1134_p * 100%);
          }
          .part-4 {
            font-size: 30px;
            letter-spacing: 0.10em;
            color: #ffff;
            left: (269 / @rem750_p * 100%);
            bottom: (240 / @rem1134_p * 100%);
          }
          .part-5 {
            width: (164 / @rem750_p * 100%);
            left: (555 / @rem750_p * 100%);
            bottom: (36 / @rem1134_p * 100%);
            font-size: 17px;
            color: #fff;
            img{
              width: 90%;
              display: block;
              margin: 10px 0;
              right: 0;
            }
            .tex1{
              text-align: center;
              position: relative;
              bottom: (212 / @rem1134_p * 100%);
            }
            .tex2{
              text-align: center;
              position: relative;
            }
          }
        }
        .page-4 {
          background: url("/static/endYear/bg4.png");
          background-size: 100% 100%;
          .part-1 {
            position: relative;
            width: (672 / @rem750_p * 100%);
            left: (59 / @rem750_p * 100%);
            top: (66 / @rem1134_p * 100%);
            p:not(last-child){
              display: inline-block;
            }
            p{
              font-size: 40px;
              line-height: 56px;
              color: #ff297f;
            }
            div:not(first){
              font-size: 30px;
              line-height: 56px;
              color: #ffffff;
            }
          }
          .part-2 {
            width: (750 / @rem750_p * 100%);
            left: (0 / @rem750_p * 100%);
            top: (290 / @rem1134_p * 100%);
            .part66 {
              width: 100%;
              height: 100%;
              top: (136 / @rem1134_p * 100%);
              font-size: 30px;
              color: #ff297f;
              .mzType{
                color: #ff297f;
                left: (300 / @rem750_p * 100%);
                top: (110 / @rem1134_p * 100%);
              }
              .bjType{
                color: #ff297f;
                left: (566 / @rem750_p * 100%);
                top: (473 / @rem1134_p * 100%);
              }
              .myType{
                color: #ff297f;
                left: (49 / @rem750_p * 100%);
                top: (473 / @rem1134_p * 100%);
              }
              .ghType{
                color: #ff297f;
                left: (132 / @rem750_p * 100%);
                top: (1010 / @rem1134_p * 100%);
              }
              .qtType{
                color: #ff297f;
                left: (469 / @rem750_p * 100%);
                top: (1010 / @rem1134_p * 100%);
              }
            }
          }
          .part-3 {
            width: (180 / @rem750_p * 100%);
            left: (265 / @rem750_p * 100%);
            top: (500 / @rem1134_p * 100%);
          }
          .part-4 {
            font-size: 30px;
            color: #ffff;
            left: (172 / @rem750_p * 100%);
            bottom: (274 / @rem1134_p * 100%);
          }
          .part-5 {
            width: (164 / @rem750_p * 100%);
            left: (555 / @rem750_p * 100%);
            bottom: (36 / @rem1134_p * 100%);
            font-size: 17px;
            color: #fff;
            img{
              width: 90%;
              display: block;
              margin: 10px 0;
              right: 0;
            }
            .tex1{
              position: relative;
              text-align: center;
              bottom: (212 / @rem1134_p * 100%);
            }
            .tex2{
              position: relative;
              text-align: center;
            }
          }
        }
        .page-5 {
          background: url("/static/endYear/bg5.jpg");
          background-size: 100% 100%;
          .part-1 {
            position: relative;
            width: (672 / @rem750_p * 100%);
            left: (59 / @rem750_p * 100%);
            top: (66 / @rem1134_p * 100%);
            p {
              font-size: 40px;
              line-height: 56px;
              color: #ff297f;
              display: inline-block;
            }
            div:not(first) {
              font-size: 30px;
              line-height: 56px;
              color: #ffffff;
            }
          }
          .part-2 {
            width: (667 / @rem750_p * 100%);
            left: (39 / @rem750_p * 100%);
            top: (459 / @rem1134_p * 100%);
          }
          .part-3 {
            width: (604 / @rem750_p * 100%);
            left: (69 / @rem750_p * 100%);
            top: (317 / @rem1134_p * 100%);
          }
          .part-4 {
            font-size: 30px;
            color: #ffff;
            left: (135 / @rem750_p * 100%);
            bottom: (270 / @rem1134_p * 100%);
          }
          .part-5 {
            width: (164 / @rem750_p * 100%);
            left: (555 / @rem750_p * 100%);
            bottom: (36 / @rem1134_p * 100%);
            font-size: 17px;
            color: #fff;
            img{
              width: 90%;
              display: block;
              margin: 10px 0;
              right: 0;
            }
            .tex1{
              position: relative;
              text-align: center;
              bottom: (212 / @rem1134_p * 100%);
            }
            .tex2{
              position: relative;
              text-align: center;
            }
          }
        }
        .page-6 {
          background: url("/static/endYear/bg6.png");
          background-size: 100% 100%;
          .part-1 {
            position: relative;
            width: (672 / @rem750_p * 100%);
            left: (59 / @rem750_p * 100%);
            top: (71 / @rem1134_p * 100%);
            p {
              font-size: 40px;
              line-height: 56px;
              color: #ff297f;
              display: inline-block;
            }
            div:not(first) {
              font-size: 30px;
              line-height: 56px;
              color: #ffffff;
            }
          }
          .part-2 {
            width: 120%;
            left: -20%;
            top: (264 / @rem1134_p * 100%);
          }
          .part-3 {
            width: (604 / @rem750_p * 100%);
            left: (108 / @rem750_p * 100%);
            top: (274 / @rem1134_p * 100%);
          }
          .part-4 {
            width: 100%;
            left: (180 / @rem750_p * 100%);
            bottom: (276 / @rem1134_p * 100%);
            color: #fff;
            font-size: 30px;
          }
          .part-5 {
            width: (164 / @rem750_p * 100%);
            left: (555 / @rem750_p * 100%);
            bottom: (36 / @rem1134_p * 100%);
            font-size: 17px;
            color: #fff;
            img{
              width: 90%;
              display: block;
              margin: 10px 0;
              right: 0;
            }
            .tex1{
              position: relative;
              text-align: center;
              bottom: (212 / @rem1134_p * 100%);
            }
            .tex2{
              position: relative;
              text-align: center;
            }
          }
        }
        .page-7 {
          background: url("/static/endYear/bg7.png");
          background-size: 100% 100%;
          .part-1 {
            position: relative;
            width: (672 / @rem750_p * 100%);
            left: (59 / @rem750_p * 100%);
            top: (71 / @rem1134_p * 100%);
            p {
              font-size: 40px;
              line-height: 56px;
              color: #ff297f;
              display: inline-block;
            }
            div:not(first) {
              font-size: 30px;
              line-height: 56px;
              color: #ffffff;
            }
          }
          .part-2 {
            width: (690 / @rem750_p * 100%);
            left: (37 / @rem750_p * 100%);
            top: (405 / @rem1134_p * 100%);
          }
          .part-3 {
            width: (600 / @rem750_p * 100%);
            left: (65 / @rem750_p * 100%);
            top: (323 / @rem1134_p * 100%);
          }
          .part-4 {
            width: 100%;
            left: (180 / @rem750_p * 100%);
            bottom: (276 / @rem1134_p * 100%);
            color: #fff;
            font-size: 30px;
          }
          .part-5 {
            width: (164 / @rem750_p * 100%);
            left: (555 / @rem750_p * 100%);
            bottom: (36 / @rem1134_p * 100%);
            font-size: 17px;
            color: #fff;
            img{
              width: 90%;
              display: block;
              margin: 10px 0;
              right: 0;
            }
            .tex1{
              position: relative;
              text-align: center;
              bottom: (212 / @rem1134_p * 100%);
            }
            .tex2{
              position: relative;
              text-align: center;
            }
          }
        }
        .page-8 {
          background: url("/static/endYear/bg8.png");
          background-size: 100% 100%;
          .part-1 {
            position: relative;
            width: (526 / @rem750_p * 100%);
            left: (58 / @rem750_p * 100%);
            top: (72 / @rem1134_p * 100%);
          }
          .part-2 {
            display: inline-block;
            width: (290 / @rem750_p * 100%);
            left: (67 / @rem750_p * 100%);
            top: (338 / @rem1134_p * 100%);
          }
          .part-3 {
            display: inline-block;
            width: (290 / @rem750_p * 100%);
            left: (396 / @rem750_p * 100%);
            top: (338 / @rem1134_p * 100%);
          }
          .part-4 {
            width: 100%;
            left: (0 / @rem750_p * 100%);
            bottom: (0 / @rem1134_p * 100%);
          }
          .part-5 {
            width: (624 / @rem750_p * 100%);
            left: (89 / @rem750_p * 100%);
            top: (465 / @rem1134_p * 100%);
          }
          .part-6 {
            display: inline-block;
            width: (186 / @rem750_p * 100%);
            left: (79 / @rem750_p * 100%);
            bottom: (50 / @rem1134_p * 100%);
          }
          .part-7 {
            height: (168 / @rem1134_p * 100%);
            left: (285 / @rem750_p * 100%);
            bottom: (50 / @rem1134_p * 100%);
            display: inline-flex;
            align-items: center;
          }
          .part-8 {
              width: (164 / @rem750_p * 100%);
              left: (505 / @rem750_p * 100%);
              bottom: (50 / @rem1134_p * 100%);
              font-size: 17px;
              color: #fff;
              img{
                width: 94%;
                display: block;
                margin: 10px 0;
                right: 0;
              }
            }
        }
      }
    </style>
    
    

    引入文件
    1、animate.css

    @charset "UTF-8";
    
    /*!
     * animate.css -http://daneden.me/animate
     * Version - 3.7.0
     * Licensed under the MIT license - http://opensource.org/licenses/MIT
     *
     * Copyright (c) 2018 Daniel Eden
     */
    
    @-webkit-keyframes bounce {
      from,
      20%,
      53%,
      80%,
      to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    
      40%,
      43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0);
      }
    
      70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
      }
    
      90% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0);
      }
    }
    
    @keyframes bounce {
      from,
      20%,
      53%,
      80%,
      to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    
      40%,
      43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0);
      }
    
      70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
      }
    
      90% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0);
      }
    }
    
    .bounce {
      -webkit-animation-name: bounce;
      animation-name: bounce;
      -webkit-transform-origin: center bottom;
      transform-origin: center bottom;
    }
    
    @-webkit-keyframes flash {
      from,
      50%,
      to {
        opacity: 1;
      }
    
      25%,
      75% {
        opacity: 0;
      }
    }
    
    @keyframes flash {
      from,
      50%,
      to {
        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 {
      from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
      }
    
      50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05);
      }
    
      to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
      }
    }
    
    @keyframes pulse {
      from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
      }
    
      50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05);
      }
    
      to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
      }
    }
    
    .pulse {
      -webkit-animation-name: pulse;
      animation-name: pulse;
    }
    
    @-webkit-keyframes rubberBand {
      from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
      }
    
      30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
      }
    
      40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
      }
    
      50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
      }
    
      65% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
        transform: scale3d(0.95, 1.05, 1);
      }
    
      75% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
        transform: scale3d(1.05, 0.95, 1);
      }
    
      to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
      }
    }
    
    @keyframes rubberBand {
      from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
      }
    
      30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
      }
    
      40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
      }
    
      50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
      }
    
      65% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
        transform: scale3d(0.95, 1.05, 1);
      }
    
      75% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
        transform: scale3d(1.05, 0.95, 1);
      }
    
      to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
      }
    }
    
    .rubberBand {
      -webkit-animation-name: rubberBand;
      animation-name: rubberBand;
    }
    
    @-webkit-keyframes shake {
      from,
      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    
      10%,
      30%,
      50%,
      70%,
      90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
      }
    
      20%,
      40%,
      60%,
      80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
      }
    }
    
    @keyframes shake {
      from,
      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    
      10%,
      30%,
      50%,
      70%,
      90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
      }
    
      20%,
      40%,
      60%,
      80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
      }
    }
    
    .shake {
      -webkit-animation-name: shake;
      animation-name: shake;
    }
    
    @-webkit-keyframes headShake {
      0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
      }
    
      6.5% {
        -webkit-transform: translateX(-6px) rotateY(-9deg);
        transform: translateX(-6px) rotateY(-9deg);
      }
    
      18.5% {
        -webkit-transform: translateX(5px) rotateY(7deg);
        transform: translateX(5px) rotateY(7deg);
      }
    
      31.5% {
        -webkit-transform: translateX(-3px) rotateY(-5deg);
        transform: translateX(-3px) rotateY(-5deg);
      }
    
      43.5% {
        -webkit-transform: translateX(2px) rotateY(3deg);
        transform: translateX(2px) rotateY(3deg);
      }
    
      50% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
      }
    }
    
    @keyframes headShake {
      0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
      }
    
      6.5% {
        -webkit-transform: translateX(-6px) rotateY(-9deg);
        transform: translateX(-6px) rotateY(-9deg);
      }
    
      18.5% {
        -webkit-transform: translateX(5px) rotateY(7deg);
        transform: translateX(5px) rotateY(7deg);
      }
    
      31.5% {
        -webkit-transform: translateX(-3px) rotateY(-5deg);
        transform: translateX(-3px) rotateY(-5deg);
      }
    
      43.5% {
        -webkit-transform: translateX(2px) rotateY(3deg);
        transform: translateX(2px) rotateY(3deg);
      }
    
      50% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
      }
    }
    
    .headShake {
      -webkit-animation-timing-function: ease-in-out;
      animation-timing-function: ease-in-out;
      -webkit-animation-name: headShake;
      animation-name: headShake;
    }
    
    @-webkit-keyframes swing {
      20% {
        -webkit-transform: rotate3d(0, 0, 1, 15deg);
        transform: rotate3d(0, 0, 1, 15deg);
      }
    
      40% {
        -webkit-transform: rotate3d(0, 0, 1, -10deg);
        transform: rotate3d(0, 0, 1, -10deg);
      }
    
      60% {
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg);
      }
    
      80% {
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg);
      }
    
      to {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
      }
    }
    
    @keyframes swing {
      20% {
        -webkit-transform: rotate3d(0, 0, 1, 15deg);
        transform: rotate3d(0, 0, 1, 15deg);
      }
    
      40% {
        -webkit-transform: rotate3d(0, 0, 1, -10deg);
        transform: rotate3d(0, 0, 1, -10deg);
      }
    
      60% {
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg);
      }
    
      80% {
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg);
      }
    
      to {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
      }
    }
    
    .swing {
      -webkit-transform-origin: top center;
      transform-origin: top center;
      -webkit-animation-name: swing;
      animation-name: swing;
    }
    
    @-webkit-keyframes tada {
      from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
      }
    
      10%,
      20% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
      }
    
      30%,
      50%,
      70%,
      90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
      }
    
      40%,
      60%,
      80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
      }
    
      to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
      }
    }
    
    @keyframes tada {
      from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
      }
    
      10%,
      20% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
      }
    
      30%,
      50%,
      70%,
      90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
      }
    
      40%,
      60%,
      80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
      }
    
      to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
      }
    }
    
    .tada {
      -webkit-animation-name: tada;
      animation-name: tada;
    }
    
    /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
    
    @-webkit-keyframes wobble {
      from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    
      15% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
      }
    
      30% {
        -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
      }
    
      45% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
      }
    
      60% {
        -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
      }
    
      75% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
      }
    
      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    }
    
    @keyframes wobble {
      from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    
      15% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
      }
    
      30% {
        -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
      }
    
      45% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
      }
    
      60% {
        -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
      }
    
      75% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
      }
    
      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    }
    
    .wobble {
      -webkit-animation-name: wobble;
      animation-name: wobble;
    }
    
    @-webkit-keyframes jello {
      from,
      11.1%,
      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    
      22.2% {
        -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
        transform: skewX(-12.5deg) skewY(-12.5deg);
      }
    
      33.3% {
        -webkit-transform: skewX(6.25deg) skewY(6.25deg);
        transform: skewX(6.25deg) skewY(6.25deg);
      }
    
      44.4% {
        -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
        transform: skewX(-3.125deg) skewY(-3.125deg);
      }
    
      55.5% {
        -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
        transform: skewX(1.5625deg) skewY(1.5625deg);
      }
    
      66.6% {
        -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
        transform: skewX(-0.78125deg) skewY(-0.78125deg);
      }
    
      77.7% {
        -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
        transform: skewX(0.390625deg) skewY(0.390625deg);
      }
    
      88.8% {
        -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
        transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
      }
    }
    
    @keyframes jello {
      from,
      11.1%,
      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    
      22.2% {
        -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
        transform: skewX(-12.5deg) skewY(-12.5deg);
      }
    
      33.3% {
        -webkit-transform: skewX(6.25deg) skewY(6.25deg);
        transform: skewX(6.25deg) skewY(6.25deg);
      }
    
      44.4% {
        -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
        transform: skewX(-3.125deg) skewY(-3.125deg);
      }
    
      55.5% {
        -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
        transform: skewX(1.5625deg) skewY(1.5625deg);
      }
    
      66.6% {
        -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
        transform: skewX(-0.78125deg) skewY(-0.78125deg);
      }
    
      77.7% {
        -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
        transform: skewX(0.390625deg) skewY(0.390625deg);
      }
    
      88.8% {
        -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
        transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
      }
    }
    
    .jello {
      -webkit-animation-name: jello;
      animation-name: jello;
      -webkit-transform-origin: center;
      transform-origin: center;
    }
    
    @-webkit-keyframes heartBeat {
      0% {
        -webkit-transform: scale(1);
        transform: scale(1);
      }
    
      14% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
      }
    
      28% {
        -webkit-transform: scale(1);
        transform: scale(1);
      }
    
      42% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
      }
    
      70% {
        -webkit-transform: scale(1);
        transform: scale(1);
      }
    }
    
    @keyframes heartBeat {
      0% {
        -webkit-transform: scale(1);
        transform: scale(1);
      }
    
      14% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
      }
    
      28% {
        -webkit-transform: scale(1);
        transform: scale(1);
      }
    
      42% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
      }
    
      70% {
        -webkit-transform: scale(1);
        transform: scale(1);
      }
    }
    
    .heartBeat {
      -webkit-animation-name: heartBeat;
      animation-name: heartBeat;
      -webkit-animation-duration: 1.3s;
      animation-duration: 1.3s;
      -webkit-animation-timing-function: ease-in-out;
      animation-timing-function: ease-in-out;
    }
    
    @-webkit-keyframes bounceIn {
      from,
      20%,
      40%,
      60%,
      80%,
      to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      }
    
      0% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
      }
    
      20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
      }
    
      40% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
      }
    
      60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
      }
    
      80% {
        -webkit-transform: scale3d(0.97, 0.97, 0.97);
        transform: scale3d(0.97, 0.97, 0.97);
      }
    
      to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
      }
    }
    
    @keyframes bounceIn {
      from,
      20%,
      40%,
      60%,
      80%,
      to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      }
    
      0% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
      }
    
      20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
      }
    
      40% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
      }
    
      60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
      }
    
      80% {
        -webkit-transform: scale3d(0.97, 0.97, 0.97);
        transform: scale3d(0.97, 0.97, 0.97);
      }
    
      to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
      }
    }
    
    .bounceIn {
      -webkit-animation-duration: 0.75s;
      animation-duration: 0.75s;
      -webkit-animation-name: bounceIn;
      animation-name: bounceIn;
    }
    
    @-webkit-keyframes bounceInDown {
      from,
      60%,
      75%,
      90%,
      to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      }
    
      0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0);
      }
    
      60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0);
      }
    
      75% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
      }
    
      90% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0);
      }
    
      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    }
    
    @keyframes bounceInDown {
      from,
      60%,
      75%,
      90%,
      to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      }
    
      0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0);
      }
    
      60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0);
      }
    
      75% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
      }
    
      90% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0);
      }
    
      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    }
    
    .bounceInDown {
      -webkit-animation-name: bounceInDown;
      animation-name: bounceInDown;
    }
    
    @-webkit-keyframes bounceInLeft {
      from,
      60%,
      75%,
      90%,
      to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      }
    
      0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px, 0, 0);
        transform: translate3d(-3000px, 0, 0);
      }
    
      60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0);
        transform: translate3d(25px, 0, 0);
      }
    
      75% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
      }
    
      90% {
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0);
      }
    
      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    }
    
    @keyframes bounceInLeft {
      from,
      60%,
      75%,
      90%,
      to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      }
    
      0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px, 0, 0);
        transform: translate3d(-3000px, 0, 0);
      }
    
      60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0);
        transform: translate3d(25px, 0, 0);
      }
    
      75% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
      }
    
      90% {
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0);
      }
    
      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    }
    
    .bounceInLeft {
      -webkit-animation-name: bounceInLeft;
      animation-name: bounceInLeft;
    }
    
    @-webkit-keyframes bounceInRight {
      from,
      60%,
      75%,
      90%,
      to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      }
    
      from {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 0, 0);
        transform: translate3d(3000px, 0, 0);
      }
    
      60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0, 0);
        transform: translate3d(-25px, 0, 0);
      }
    
      75% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
      }
    
      90% {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0);
      }
    
      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    }
    
    @keyframes bounceInRight {
      from,
      60%,
      75%,
      90%,
      to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      }
    
      from {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 0, 0);
        transform: translate3d(3000px, 0, 0);
      }
    
      60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0, 0);
        transform: translate3d(-25px, 0, 0);
      }
    
      75% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
      }
    
      90% {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0);
      }
    
      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    }
    
    .bounceInRight {
      -webkit-animation-name: bounceInRight;
      animation-name: bounceInRight;
    }
    
    @-webkit-keyframes bounceInUp {
      from,
      60%,
      75%,
      90%,
      to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      }
    
      from {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0);
      }
    
      60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
      }
    
      75% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
      }
    
      90% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0);
      }
    
      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    }
    
    @keyframes bounceInUp {
      from,
      60%,
      75%,
      90%,
      to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      }
    
      from {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0);
      }
    
      60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
      }
    
      75% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
      }
    
      90% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0);
      }
    
      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    }
    
    .bounceInUp {
      -webkit-animation-name: bounceInUp;
      animation-name: bounceInUp;
    }
    
    @-webkit-keyframes bounceOut {
      20% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
      }
    
      50%,
      55% {
        opacity: 1;
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
      }
    
      to {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
      }
    }
    
    @keyframes bounceOut {
      20% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
      }
    
      50%,
      55% {
        opacity: 1;
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
      }
    
      to {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
      }
    }
    
    .bounceOut {
      -webkit-animation-duration: 0.75s;
      animation-duration: 0.75s;
      -webkit-animation-name: bounceOut;
      animation-name: bounceOut;
    }
    
    @-webkit-keyframes bounceOutDown {
      20% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
      }
    
      40%,
      45% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
      }
    
      to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
      }
    }
    
    @keyframes bounceOutDown {
      20% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
      }
    
      40%,
      45% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
      }
    
      to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
      }
    }
    
    .bounceOutDown {
      -webkit-animation-name: bounceOutDown;
      animation-name: bounceOutDown;
    }
    
    @-webkit-keyframes bounceOutLeft {
      20% {
        opacity: 1;
        -webkit-transform: translate3d(20px, 0, 0);
        transform: translate3d(20px, 0, 0);
      }
    
      to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0);
      }
    }
    
    @keyframes bounceOutLeft {
      20% {
        opacity: 1;
        -webkit-transform: translate3d(20px, 0, 0);
        transform: translate3d(20px, 0, 0);
      }
    
      to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0);
      }
    }
    
    .bounceOutLeft {
      -webkit-animation-name: bounceOutLeft;
      animation-name: bounceOutLeft;
    }
    
    @-webkit-keyframes bounceOutRight {
      20% {
        opacity: 1;
        -webkit-transform: translate3d(-20px, 0, 0);
        transform: translate3d(-20px, 0, 0);
      }
    
      to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
      }
    }
    
    @keyframes bounceOutRight {
      20% {
        opacity: 1;
        -webkit-transform: translate3d(-20px, 0, 0);
        transform: translate3d(-20px, 0, 0);
      }
    
      to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
      }
    }
    
    .bounceOutRight {
      -webkit-animation-name: bounceOutRight;
      animation-name: bounceOutRight;
    }
    
    @-webkit-keyframes bounceOutUp {
      20% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
      }
    
      40%,
      45% {
        opacity: 1;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0);
      }
    
      to {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
      }
    }
    
    @keyframes bounceOutUp {
      20% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
      }
    
      40%,
      45% {
        opacity: 1;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0);
      }
    
      to {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
      }
    }
    
    .bounceOutUp {
      -webkit-animation-name: bounceOutUp;
      animation-name: bounceOutUp;
    }
    
    @-webkit-keyframes fadeIn {
      from {
        opacity: 0;
      }
    
      to {
        opacity: 1;
      }
    }
    
    @keyframes fadeIn {
      from {
        opacity: 0;
      }
    
      to {
        opacity: 1;
      }
    }
    
    .fadeIn {
      -webkit-animation-name: fadeIn;
      animation-name: fadeIn;
    }
    
    @-webkit-keyframes fadeInDown {
      from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
      }
    
      to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    }
    
    @keyframes fadeInDown {
      from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
      }
    
      to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    }
    
    .fadeInDown {
      -webkit-animation-name: fadeInDown;
      animation-name: fadeInDown;
    }
    
    @-webkit-keyframes fadeInDownBig {
      from {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
      }
    
      to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    }
    
    @keyframes fadeInDownBig {
      from {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
      }
    
      to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    }
    
    .fadeInDownBig {
      -webkit-animation-name: fadeInDownBig;
      animation-name: fadeInDownBig;
    }
    
    @-webkit-keyframes fadeInLeft {
      from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
      }
    
      to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    }
    
    @keyframes fadeInLeft {
      from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
      }
    
      to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    }
    
    .fadeInLeft {
      -webkit-animation-name: fadeInLeft;
      animation-name: fadeInLeft;
    }
    
    @-webkit-keyframes fadeInLeftBig {
      from {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0);
      }
    
      to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    }
    
    @keyframes fadeInLeftBig {
      from {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0);
      }
    
      to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    }
    
    .fadeInLeftBig {
      -webkit-animation-name: fadeInLeftBig;
      animation-name: fadeInLeftBig;
    }
    
    @-webkit-keyframes fadeInRight {
      from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
      }
    
      to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    }
    
    @keyframes fadeInRight {
      from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
      }
    
      to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    }
    
    .fadeInRight {
      -webkit-animation-name: fadeInRight;
      animation-name: fadeInRight;
    }
    
    @-webkit-keyframes fadeInRightBig {
      from {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
      }
    
      to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    }
    
    @keyframes fadeInRightBig {
      from {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
      }
    
      to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    }
    
    .fadeInRightBig {
      -webkit-animation-name: fadeInRightBig;
      animation-name: fadeInRightBig;
    }
    
    @-webkit-keyframes fadeInUp {
      from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
      }
    
      to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    }
    
    @keyframes fadeInUp {
      from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
      }
    
      to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    }
    
    .fadeInUp {
      -webkit-animation-name: fadeInUp;
      animation-name: fadeInUp;
    }
    
    @-webkit-keyframes fadeInUpBig {
      from {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
      }
    
      to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    }
    
    @keyframes fadeInUpBig {
      from {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
      }
    
      to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    }
    
    .fadeInUpBig {
      -webkit-animation-name: fadeInUpBig;
      animation-name: fadeInUpBig;
    }
    
    @-webkit-keyframes fadeOut {
      from {
        opacity: 1;
      }
    
      to {
        opacity: 0;
      }
    }
    
    @keyframes fadeOut {
      from {
        opacity: 1;
      }
    
      to {
        opacity: 0;
      }
    }
    
    .fadeOut {
      -webkit-animation-name: fadeOut;
      animation-name: fadeOut;
    }
    
    @-webkit-keyframes fadeOutDown {
      from {
        opacity: 1;
      }
    
      to {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
      }
    }
    
    @keyframes fadeOutDown {
      from {
        opacity: 1;
      }
    
      to {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
      }
    }
    
    .fadeOutDown {
      -webkit-animation-name: fadeOutDown;
      animation-name: fadeOutDown;
    }
    
    @-webkit-keyframes fadeOutDownBig {
      from {
        opacity: 1;
      }
    
      to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
      }
    }
    
    @keyframes fadeOutDownBig {
      from {
        opacity: 1;
      }
    
      to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
      }
    }
    
    .fadeOutDownBig {
      -webkit-animation-name: fadeOutDownBig;
      animation-name: fadeOutDownBig;
    }
    
    @-webkit-keyframes fadeOutLeft {
      from {
        opacity: 1;
      }
    
      to {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
      }
    }
    
    @keyframes fadeOutLeft {
      from {
        opacity: 1;
      }
    
      to {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
      }
    }
    
    .fadeOutLeft {
      -webkit-animation-name: fadeOutLeft;
      animation-name: fadeOutLeft;
    }
    
    @-webkit-keyframes fadeOutLeftBig {
      from {
        opacity: 1;
      }
    
      to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0);
      }
    }
    
    @keyframes fadeOutLeftBig {
      from {
        opacity: 1;
      }
    
      to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0);
      }
    }
    
    .fadeOutLeftBig {
      -webkit-animation-name: fadeOutLeftBig;
      animation-name: fadeOutLeftBig;
    }
    
    @-webkit-keyframes fadeOutRight {
      from {
        opacity: 1;
      }
    
      to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
      }
    }
    
    @keyframes fadeOutRight {
      from {
        opacity: 1;
      }
    
      to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
      }
    }
    
    .fadeOutRight {
      -webkit-animation-name: fadeOutRight;
      animation-name: fadeOutRight;
    }
    
    @-webkit-keyframes fadeOutRightBig {
      from {
        opacity: 1;
      }
    
      to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
      }
    }
    
    @keyframes fadeOutRightBig {
      from {
        opacity: 1;
      }
    
      to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
      }
    }
    
    .fadeOutRightBig {
      -webkit-animation-name: fadeOutRightBig;
      animation-name: fadeOutRightBig;
    }
    
    @-webkit-keyframes fadeOutUp {
      from {
        opacity: 1;
      }
    
      to {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
      }
    }
    
    @keyframes fadeOutUp {
      from {
        opacity: 1;
      }
    
      to {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
      }
    }
    
    .fadeOutUp {
      -webkit-animation-name: fadeOutUp;
      animation-name: fadeOutUp;
    }
    
    @-webkit-keyframes fadeOutUpBig {
      from {
        opacity: 1;
      }
    
      to {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
      }
    }
    
    @keyframes fadeOutUpBig {
      from {
        opacity: 1;
      }
    
      to {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
      }
    }
    
    .fadeOutUpBig {
      -webkit-animation-name: fadeOutUpBig;
      animation-name: fadeOutUpBig;
    }
    
    @-webkit-keyframes flip {
      from {
        -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
          rotate3d(0, 1, 0, -360deg);
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
      }
    
      40% {
        -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
          rotate3d(0, 1, 0, -190deg);
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
          rotate3d(0, 1, 0, -190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
      }
    
      50% {
        -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
          rotate3d(0, 1, 0, -170deg);
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
          rotate3d(0, 1, 0, -170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
      }
    
      80% {
        -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
          rotate3d(0, 1, 0, 0deg);
        transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
          rotate3d(0, 1, 0, 0deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
      }
    
      to {
        -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
          rotate3d(0, 1, 0, 0deg);
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
      }
    }
    
    @keyframes flip {
      from {
        -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
          rotate3d(0, 1, 0, -360deg);
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
      }
    
      40% {
        -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
          rotate3d(0, 1, 0, -190deg);
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
          rotate3d(0, 1, 0, -190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
      }
    
      50% {
        -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
          rotate3d(0, 1, 0, -170deg);
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
          rotate3d(0, 1, 0, -170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
      }
    
      80% {
        -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
          rotate3d(0, 1, 0, 0deg);
        transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
          rotate3d(0, 1, 0, 0deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
      }
    
      to {
        -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
          rotate3d(0, 1, 0, 0deg);
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
      }
    }
    
    .animated.flip {
      -webkit-backface-visibility: visible;
      backface-visibility: visible;
      -webkit-animation-name: flip;
      animation-name: flip;
    }
    
    @-webkit-keyframes flipInX {
      from {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
      }
    
      40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
      }
    
      60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
      }
    
      80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
      }
    
      to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
      }
    }
    
    @keyframes flipInX {
      from {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
      }
    
      40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
      }
    
      60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
      }
    
      80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
      }
    
      to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
      }
    }
    
    .flipInX {
      -webkit-backface-visibility: visible !important;
      backface-visibility: visible !important;
      -webkit-animation-name: flipInX;
      animation-name: flipInX;
    }
    
    @-webkit-keyframes flipInY {
      from {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
      }
    
      40% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
      }
    
      60% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1;
      }
    
      80% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
      }
    
      to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
      }
    }
    
    @keyframes flipInY {
      from {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
      }
    
      40% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
      }
    
      60% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1;
      }
    
      80% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
      }
    
      to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
      }
    }
    
    .flipInY {
      -webkit-backface-visibility: visible !important;
      backface-visibility: visible !important;
      -webkit-animation-name: flipInY;
      animation-name: flipInY;
    }
    
    @-webkit-keyframes flipOutX {
      from {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
      }
    
      30% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        opacity: 1;
      }
    
      to {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        opacity: 0;
      }
    }
    
    @keyframes flipOutX {
      from {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
      }
    
      30% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        opacity: 1;
      }
    
      to {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        opacity: 0;
      }
    }
    
    .flipOutX {
      -webkit-animation-duration: 0.75s;
      animation-duration: 0.75s;
      -webkit-animation-name: flipOutX;
      animation-name: flipOutX;
      -webkit-backface-visibility: visible !important;
      backface-visibility: visible !important;
    }
    
    @-webkit-keyframes flipOutY {
      from {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
      }
    
      30% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        opacity: 1;
      }
    
      to {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        opacity: 0;
      }
    }
    
    @keyframes flipOutY {
      from {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
      }
    
      30% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        opacity: 1;
      }
    
      to {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        opacity: 0;
      }
    }
    
    .flipOutY {
      -webkit-animation-duration: 0.75s;
      animation-duration: 0.75s;
      -webkit-backface-visibility: visible !important;
      backface-visibility: visible !important;
      -webkit-animation-name: flipOutY;
      animation-name: flipOutY;
    }
    
    @-webkit-keyframes lightSpeedIn {
      from {
        -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0;
      }
    
      60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1;
      }
    
      80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
      }
    
      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    }
    
    @keyframes lightSpeedIn {
      from {
        -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0;
      }
    
      60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1;
      }
    
      80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
      }
    
      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    }
    
    .lightSpeedIn {
      -webkit-animation-name: lightSpeedIn;
      animation-name: lightSpeedIn;
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }
    
    @-webkit-keyframes lightSpeedOut {
      from {
        opacity: 1;
      }
    
      to {
        -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
        transform: translate3d(100%, 0, 0) skewX(30deg);
        opacity: 0;
      }
    }
    
    @keyframes lightSpeedOut {
      from {
        opacity: 1;
      }
    
      to {
        -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
        transform: translate3d(100%, 0, 0) 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 {
      from {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, -200deg);
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0;
      }
    
      to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
      }
    }
    
    @keyframes rotateIn {
      from {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, -200deg);
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0;
      }
    
      to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
      }
    }
    
    .rotateIn {
      -webkit-animation-name: rotateIn;
      animation-name: rotateIn;
    }
    
    @-webkit-keyframes rotateInDownLeft {
      from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
      }
    
      to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
      }
    }
    
    @keyframes rotateInDownLeft {
      from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
      }
    
      to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
      }
    }
    
    .rotateInDownLeft {
      -webkit-animation-name: rotateInDownLeft;
      animation-name: rotateInDownLeft;
    }
    
    @-webkit-keyframes rotateInDownRight {
      from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
      }
    
      to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
      }
    }
    
    @keyframes rotateInDownRight {
      from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
      }
    
      to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
      }
    }
    
    .rotateInDownRight {
      -webkit-animation-name: rotateInDownRight;
      animation-name: rotateInDownRight;
    }
    
    @-webkit-keyframes rotateInUpLeft {
      from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
      }
    
      to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
      }
    }
    
    @keyframes rotateInUpLeft {
      from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
      }
    
      to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
      }
    }
    
    .rotateInUpLeft {
      -webkit-animation-name: rotateInUpLeft;
      animation-name: rotateInUpLeft;
    }
    
    @-webkit-keyframes rotateInUpRight {
      from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, -90deg);
        transform: rotate3d(0, 0, 1, -90deg);
        opacity: 0;
      }
    
      to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
      }
    }
    
    @keyframes rotateInUpRight {
      from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, -90deg);
        transform: rotate3d(0, 0, 1, -90deg);
        opacity: 0;
      }
    
      to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
      }
    }
    
    .rotateInUpRight {
      -webkit-animation-name: rotateInUpRight;
      animation-name: rotateInUpRight;
    }
    
    @-webkit-keyframes rotateOut {
      from {
        -webkit-transform-origin: center;
        transform-origin: center;
        opacity: 1;
      }
    
      to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, 200deg);
        transform: rotate3d(0, 0, 1, 200deg);
        opacity: 0;
      }
    }
    
    @keyframes rotateOut {
      from {
        -webkit-transform-origin: center;
        transform-origin: center;
        opacity: 1;
      }
    
      to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, 200deg);
        transform: rotate3d(0, 0, 1, 200deg);
        opacity: 0;
      }
    }
    
    .rotateOut {
      -webkit-animation-name: rotateOut;
      animation-name: rotateOut;
    }
    
    @-webkit-keyframes rotateOutDownLeft {
      from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        opacity: 1;
      }
    
      to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
      }
    }
    
    @keyframes rotateOutDownLeft {
      from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        opacity: 1;
      }
    
      to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
      }
    }
    
    .rotateOutDownLeft {
      -webkit-animation-name: rotateOutDownLeft;
      animation-name: rotateOutDownLeft;
    }
    
    @-webkit-keyframes rotateOutDownRight {
      from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        opacity: 1;
      }
    
      to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
      }
    }
    
    @keyframes rotateOutDownRight {
      from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        opacity: 1;
      }
    
      to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
      }
    }
    
    .rotateOutDownRight {
      -webkit-animation-name: rotateOutDownRight;
      animation-name: rotateOutDownRight;
    }
    
    @-webkit-keyframes rotateOutUpLeft {
      from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        opacity: 1;
      }
    
      to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
      }
    }
    
    @keyframes rotateOutUpLeft {
      from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        opacity: 1;
      }
    
      to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
      }
    }
    
    .rotateOutUpLeft {
      -webkit-animation-name: rotateOutUpLeft;
      animation-name: rotateOutUpLeft;
    }
    
    @-webkit-keyframes rotateOutUpRight {
      from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        opacity: 1;
      }
    
      to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, 90deg);
        transform: rotate3d(0, 0, 1, 90deg);
        opacity: 0;
      }
    }
    
    @keyframes rotateOutUpRight {
      from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        opacity: 1;
      }
    
      to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, 90deg);
        transform: rotate3d(0, 0, 1, 90deg);
        opacity: 0;
      }
    }
    
    .rotateOutUpRight {
      -webkit-animation-name: rotateOutUpRight;
      animation-name: rotateOutUpRight;
    }
    
    @-webkit-keyframes hinge {
      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: rotate3d(0, 0, 1, 80deg);
        transform: rotate3d(0, 0, 1, 80deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
      }
    
      40%,
      80% {
        -webkit-transform: rotate3d(0, 0, 1, 60deg);
        transform: rotate3d(0, 0, 1, 60deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1;
      }
    
      to {
        -webkit-transform: translate3d(0, 700px, 0);
        transform: translate3d(0, 700px, 0);
        opacity: 0;
      }
    }
    
    @keyframes hinge {
      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: rotate3d(0, 0, 1, 80deg);
        transform: rotate3d(0, 0, 1, 80deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
      }
    
      40%,
      80% {
        -webkit-transform: rotate3d(0, 0, 1, 60deg);
        transform: rotate3d(0, 0, 1, 60deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1;
      }
    
      to {
        -webkit-transform: translate3d(0, 700px, 0);
        transform: translate3d(0, 700px, 0);
        opacity: 0;
      }
    }
    
    .hinge {
      -webkit-animation-duration: 2s;
      animation-duration: 2s;
      -webkit-animation-name: hinge;
      animation-name: hinge;
    }
    
    @-webkit-keyframes jackInTheBox {
      from {
        opacity: 0;
        -webkit-transform: scale(0.1) rotate(30deg);
        transform: scale(0.1) rotate(30deg);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
      }
    
      50% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
      }
    
      70% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg);
      }
    
      to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
      }
    }
    
    @keyframes jackInTheBox {
      from {
        opacity: 0;
        -webkit-transform: scale(0.1) rotate(30deg);
        transform: scale(0.1) rotate(30deg);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
      }
    
      50% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
      }
    
      70% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg);
      }
    
      to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
      }
    }
    
    .jackInTheBox {
      -webkit-animation-name: jackInTheBox;
      animation-name: jackInTheBox;
    }
    
    /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
    
    @-webkit-keyframes rollIn {
      from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
        transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
      }
    
      to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    }
    
    @keyframes rollIn {
      from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
        transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
      }
    
      to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    }
    
    .rollIn {
      -webkit-animation-name: rollIn;
      animation-name: rollIn;
    }
    
    /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
    
    @-webkit-keyframes rollOut {
      from {
        opacity: 1;
      }
    
      to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
        transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
      }
    }
    
    @keyframes rollOut {
      from {
        opacity: 1;
      }
    
      to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
        transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
      }
    }
    
    .rollOut {
      -webkit-animation-name: rollOut;
      animation-name: rollOut;
    }
    
    @-webkit-keyframes zoomIn {
      from {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
      }
    
      50% {
        opacity: 1;
      }
    }
    
    @keyframes zoomIn {
      from {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
      }
    
      50% {
        opacity: 1;
      }
    }
    
    .zoomIn {
      -webkit-animation-name: zoomIn;
      animation-name: zoomIn;
    }
    
    @-webkit-keyframes zoomInDown {
      from {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      }
    
      60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
      }
    }
    
    @keyframes zoomInDown {
      from {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      }
    
      60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
      }
    }
    
    .zoomInDown {
      -webkit-animation-name: zoomInDown;
      animation-name: zoomInDown;
    }
    
    @-webkit-keyframes zoomInLeft {
      from {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      }
    
      60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
      }
    }
    
    @keyframes zoomInLeft {
      from {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      }
    
      60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
      }
    }
    
    .zoomInLeft {
      -webkit-animation-name: zoomInLeft;
      animation-name: zoomInLeft;
    }
    
    @-webkit-keyframes zoomInRight {
      from {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      }
    
      60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
      }
    }
    
    @keyframes zoomInRight {
      from {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      }
    
      60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
      }
    }
    
    .zoomInRight {
      -webkit-animation-name: zoomInRight;
      animation-name: zoomInRight;
    }
    
    @-webkit-keyframes zoomInUp {
      from {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      }
    
      60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
      }
    }
    
    @keyframes zoomInUp {
      from {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      }
    
      60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
      }
    }
    
    .zoomInUp {
      -webkit-animation-name: zoomInUp;
      animation-name: zoomInUp;
    }
    
    @-webkit-keyframes zoomOut {
      from {
        opacity: 1;
      }
    
      50% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
      }
    
      to {
        opacity: 0;
      }
    }
    
    @keyframes zoomOut {
      from {
        opacity: 1;
      }
    
      50% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
      }
    
      to {
        opacity: 0;
      }
    }
    
    .zoomOut {
      -webkit-animation-name: zoomOut;
      animation-name: zoomOut;
    }
    
    @-webkit-keyframes zoomOutDown {
      40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      }
    
      to {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
      }
    }
    
    @keyframes zoomOutDown {
      40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      }
    
      to {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
      }
    }
    
    .zoomOutDown {
      -webkit-animation-name: zoomOutDown;
      animation-name: zoomOutDown;
    }
    
    @-webkit-keyframes zoomOutLeft {
      40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
      }
    
      to {
        opacity: 0;
        -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
        transform: scale(0.1) translate3d(-2000px, 0, 0);
        -webkit-transform-origin: left center;
        transform-origin: left center;
      }
    }
    
    @keyframes zoomOutLeft {
      40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
      }
    
      to {
        opacity: 0;
        -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
        transform: scale(0.1) translate3d(-2000px, 0, 0);
        -webkit-transform-origin: left center;
        transform-origin: left center;
      }
    }
    
    .zoomOutLeft {
      -webkit-animation-name: zoomOutLeft;
      animation-name: zoomOutLeft;
    }
    
    @-webkit-keyframes zoomOutRight {
      40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
      }
    
      to {
        opacity: 0;
        -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
        transform: scale(0.1) translate3d(2000px, 0, 0);
        -webkit-transform-origin: right center;
        transform-origin: right center;
      }
    }
    
    @keyframes zoomOutRight {
      40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
      }
    
      to {
        opacity: 0;
        -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
        transform: scale(0.1) translate3d(2000px, 0, 0);
        -webkit-transform-origin: right center;
        transform-origin: right center;
      }
    }
    
    .zoomOutRight {
      -webkit-animation-name: zoomOutRight;
      animation-name: zoomOutRight;
    }
    
    @-webkit-keyframes zoomOutUp {
      40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      }
    
      to {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
      }
    }
    
    @keyframes zoomOutUp {
      40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      }
    
      to {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
      }
    }
    
    .zoomOutUp {
      -webkit-animation-name: zoomOutUp;
      animation-name: zoomOutUp;
    }
    
    @-webkit-keyframes slideInDown {
      from {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible;
      }
    
      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    }
    
    @keyframes slideInDown {
      from {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible;
      }
    
      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    }
    
    .slideInDown {
      -webkit-animation-name: slideInDown;
      animation-name: slideInDown;
    }
    
    @-webkit-keyframes slideInLeft {
      from {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
      }
    
      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    }
    
    @keyframes slideInLeft {
      from {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
      }
    
      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    }
    
    .slideInLeft {
      -webkit-animation-name: slideInLeft;
      animation-name: slideInLeft;
    }
    
    @-webkit-keyframes slideInRight {
      from {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible;
      }
    
      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    }
    
    @keyframes slideInRight {
      from {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible;
      }
    
      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    }
    
    .slideInRight {
      -webkit-animation-name: slideInRight;
      animation-name: slideInRight;
    }
    
    @-webkit-keyframes slideInUp {
      from {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible;
      }
    
      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    }
    
    @keyframes slideInUp {
      from {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible;
      }
    
      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    }
    
    .slideInUp {
      -webkit-animation-name: slideInUp;
      animation-name: slideInUp;
    }
    
    @-webkit-keyframes slideOutDown {
      from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    
      to {
        visibility: hidden;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
      }
    }
    
    @keyframes slideOutDown {
      from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    
      to {
        visibility: hidden;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
      }
    }
    
    .slideOutDown {
      -webkit-animation-name: slideOutDown;
      animation-name: slideOutDown;
    }
    
    @-webkit-keyframes slideOutLeft {
      from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    
      to {
        visibility: hidden;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
      }
    }
    
    @keyframes slideOutLeft {
      from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    
      to {
        visibility: hidden;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
      }
    }
    
    .slideOutLeft {
      -webkit-animation-name: slideOutLeft;
      animation-name: slideOutLeft;
    }
    
    @-webkit-keyframes slideOutRight {
      from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    
      to {
        visibility: hidden;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
      }
    }
    
    @keyframes slideOutRight {
      from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    
      to {
        visibility: hidden;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
      }
    }
    
    .slideOutRight {
      -webkit-animation-name: slideOutRight;
      animation-name: slideOutRight;
    }
    
    @-webkit-keyframes slideOutUp {
      from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    
      to {
        visibility: hidden;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
      }
    }
    
    @keyframes slideOutUp {
      from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    
      to {
        visibility: hidden;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
      }
    }
    
    .slideOutUp {
      -webkit-animation-name: slideOutUp;
      animation-name: slideOutUp;
    }
    
    .animated {
      -webkit-animation-duration: 1s;
      animation-duration: 1s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
    }
    
    .animated.infinite {
      -webkit-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
    }
    
    .animated.delay-1s {
      -webkit-animation-delay: 1s;
      animation-delay: 1s;
    }
    
    .animated.delay-2s {
      -webkit-animation-delay: 2s;
      animation-delay: 2s;
    }
    
    .animated.delay-3s {
      -webkit-animation-delay: 3s;
      animation-delay: 3s;
    }
    
    .animated.delay-4s {
      -webkit-animation-delay: 4s;
      animation-delay: 4s;
    }
    
    .animated.delay-5s {
      -webkit-animation-delay: 5s;
      animation-delay: 5s;
    }
    
    .animated.fast {
      -webkit-animation-duration: 800ms;
      animation-duration: 800ms;
    }
    
    .animated.faster {
      -webkit-animation-duration: 500ms;
      animation-duration: 500ms;
    }
    
    .animated.slow {
      -webkit-animation-duration: 2s;
      animation-duration: 2s;
    }
    
    .animated.slower {
      -webkit-animation-duration: 3s;
      animation-duration: 3s;
    }
    
    @media (prefers-reduced-motion) {
      .animated {
        -webkit-animation: unset !important;
        animation: unset !important;
        -webkit-transition: none !important;
        transition: none !important;
      }
    }
    
    

    2、vue-fullpage.css

    .fullpage-container {
    	position: relative;
      width: 100%;
      height: 100%;
    	overflow: hidden;
    }
    
    .fullpage-wp {
    	display: flex;
      width: 100%;
      height: 100%;
    	flex-flow: column nowrap;
    	justify-content: flex-start;
    	align-items: center;
    }
    
    .fullpage-wp.anim{
    		transform: translate3d(0,0,0);
        -webkit-transition: all 500ms ease-out 0s;
        transition: all 500ms ease-out 0s;
    }
    
    .fullpage-wp.fullpage-wp-h {
      display: flex;
    	flex-flow: row nowrap;
    	justify-content: flex-start;
    	align-items: center;
    }
    
    .page {
    	box-sizing: border-box;
      display: block;
    	position: relative;
    	width: 100%;
    	height: 100%;
    	flex-shrink: 0;
      overflow: hidden;
    }
    
    .animated {
    	opacity: 1;
    }
    
    

    3、page.less

    @charset "utf-8";
    /*!
     * @author wentaini@163.com
     * @date 2017/9/17
     * @version 1.0.0
     * @description 公共样式
     */
    
    * {
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      tap-highlight-color: rgba(0, 0, 0, 0);
    }
    
    @width: 640;
    @height: 1007;
    
    @rem750: (750 / 320 * 12rem);
    @rem640: (640 / 320 * 12rem);
    @rem1206: (1206 / 320 * 12rem);
    
    @rem750_p: (750);
    @rem1134_p: (1206);
    
    @base_color: #00aeef;
    
    body, html {
      font-size: (24 / @rem750);
    }
    
    figure {
      margin: 0;
    }
    
    .clearfix {
      position: absolute;
    }
    
    .clearrel {
      position: relative;
    }
    
    .clear {
      clear: both;
    }
    
    .t_left {
      width: 50%;
      float: left;
    }
    
    .t_right {
      width: 50%;
      float: right;
    }
    
    .row {
      width: 100%;
    }
    
    .opacity {
      opacity: 0;
    }
    
    .img {
      width: 100%;
    }
    
    .inline {
      display: inline;
    }
    
    .hide {
      display: none;
    }
    
    button:active {
    
    }
    
    .h100 {
      height: (100 / @rem750);
    }
    
    a {
      text-decoration: none;
    }
    
    
    展开全文
  • 移动端用下拉刷新的方式实现上拉加载 移动端(手机端)页面...一个 VUE 组件:实现子元素 scroll 父元素容器不跟随滚动(兼容PC、移动端) 移动端rem.js使用方法 移动端常见bug -webkit-overflow-scrolling介绍 `...

    -webkit-overflow-scrolling介绍

    ``` -webkit-overflow-scrolling: auto | touch; ``` auto: 普通滚动,当手指从触摸屏上移开,滚动立即停止 touch:滚动回弹效果,当手指从触摸屏上移开,内容会保持一段时间的滚动效果,继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

    兼容写法

    ``` over-flow: auto; /* winphone8和android4+ */ -webkit-overflow-scrolling: touch; /* ios5+ */ ```

    如何使用

    上代码: ```
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    ``` ``` .scrollContainer{ width: 100px; height: 50px; -webkit-overflow-scrolling: touch; overflow-y: auto; overflow-x: hidden; } .scrollContainer>ul>li{ height: 20px; width: 100%; } ```

    可能会出现的bug

        1.父级元素scrollContainer加上定位position: absolute|relative,滑动几次后可滚动区域会卡主,不能在滑动     2.快速滑动页面会出现空白,滑动停止后内容才显示 此时,你应该给父级元素scrollContainer加上如下代码: ``` //解决第一个bug z-index:1;

    //解决第二个bug
    -webkit-backface-visibility: hidden;
    -webkit-transform: translate3d(0,0,0);

    
    
    <h2>需求</h2>
    在vue项目中,我们可能会遇到这样的需求,例如:
    
    商品列表页中,点击某一商品,进入到详情页。
    
    从详情页中返回到商品列表页,页面应当显示的页面应当是之前的样子。
    
    也就是说,滚动条的位置应该缓存下来;
    
    <h2>思路</h2>
    &nbsp;&nbsp;&nbsp;&nbsp;1.商品列表需要被缓存下来,页面的缓存方式请查看vue官方文档keep-alive来缓存页面,这样,在详情页面返回的时候,页面不至于重新加载。
    &nbsp;&nbsp;&nbsp;&nbsp;2.在商品列表生命周期activated中,监听当前scrollContainer父元素的滚动事件,滚动时的回调中,获取到scrollTop(滚动条距离滚动元素即scrollContainer的距离)的值,存入到以及在deactivated中移除掉当前滚动事件的监听。
    &nbsp;&nbsp;&nbsp;&nbsp;3.在商品列表中,点击进入详情页中的时候,将滚动条位置被缓存下来了,你可以放到sessionStorage|localStorage中。当然,如果你使用了vuex,可以直接将值放入vuex中进行管理;
    &nbsp;&nbsp;&nbsp;&nbsp;4.从详情页中返回的时候,同时要做这样的操作,将你存入缓存中的scrollTop值重新赋予给当前div的滚动条
    &nbsp;&nbsp;&nbsp;&nbsp;5.Ok,思路就是这样子,大功告成。
    
    
    <h2>vue中具体实现</h2>
    我是用的vuex进行管理的滚动条位置,实现代码如下:
    
    //加了一个ref,用于获取当前dom
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    ``` ``` computed:{ ...mapGetters([ "home_list_top" //vuex中的存放的滚动条的位置 ]) } ... methods:{ recordScrollPosition(e) { this.$store.dispatch("setHomeListTop",e.target.scrollTop); //实时存入到vuex中 } } ... activated(){ //滚动条位置的监听放到activated是因为此页面被keep-alive缓存了 this.$refs.scroll.scrollTop = this.home_list_top; //this.$refs.scroll拿到滚动的dom,即scrollContainer,this.home_list_top是存入到vuex里的值 this.$refs.scroll.addEventListener("scroll",this.recordScrollPosition); //添加绑定事件 }, deactivated(){ //keep-alive 的页面跳转时,移除scroll事件 this.$refs.scroll.removeEventListener("scroll",this.recordScrollPosition); //清除绑定的scroll事件 } ```

    后话

    如果有更好的办法,互相交流。

    https://segmentfault.com/a/1190000012857661

    展开全文
  • 移动端用下拉刷新的方式实现上拉加载 移动端(手机端)页面...一个 VUE 组件:实现子元素 scroll 父元素容器不跟随滚动(兼容PC、移动端) 移动端rem.js使用方法 移动端常见bug -webkit-overflow-scrolling介绍 `...

    -webkit-overflow-scrolling介绍

    ``` -webkit-overflow-scrolling: auto | touch; ``` auto: 普通滚动,当手指从触摸屏上移开,滚动立即停止 touch:滚动回弹效果,当手指从触摸屏上移开,内容会保持一段时间的滚动效果,继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

    兼容写法

    ``` over-flow: auto; /* winphone8和android4+ */ -webkit-overflow-scrolling: touch; /* ios5+ */ ```

    如何使用

    上代码: ```
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    ``` ``` .scrollContainer{ width: 100px; height: 50px; -webkit-overflow-scrolling: touch; overflow-y: auto; overflow-x: hidden; } .scrollContainer>ul>li{ height: 20px; width: 100%; } ```

    可能会出现的bug

        1.父级元素scrollContainer加上定位position: absolute|relative,滑动几次后可滚动区域会卡主,不能在滑动     2.快速滑动页面会出现空白,滑动停止后内容才显示 此时,你应该给父级元素scrollContainer加上如下代码: ``` //解决第一个bug z-index:1;

    //解决第二个bug
    -webkit-backface-visibility: hidden;
    -webkit-transform: translate3d(0,0,0);

    
    
    <h2>需求</h2>
    在vue项目中,我们可能会遇到这样的需求,例如:
    
    商品列表页中,点击某一商品,进入到详情页。
    
    从详情页中返回到商品列表页,页面应当显示的页面应当是之前的样子。
    
    也就是说,滚动条的位置应该缓存下来;
    
    <h2>思路</h2>
    &nbsp;&nbsp;&nbsp;&nbsp;1.商品列表需要被缓存下来,页面的缓存方式请查看vue官方文档keep-alive来缓存页面,这样,在详情页面返回的时候,页面不至于重新加载。
    &nbsp;&nbsp;&nbsp;&nbsp;2.在商品列表生命周期activated中,监听当前scrollContainer父元素的滚动事件,滚动时的回调中,获取到scrollTop(滚动条距离滚动元素即scrollContainer的距离)的值,存入到以及在deactivated中移除掉当前滚动事件的监听。
    &nbsp;&nbsp;&nbsp;&nbsp;3.在商品列表中,点击进入详情页中的时候,将滚动条位置被缓存下来了,你可以放到sessionStorage|localStorage中。当然,如果你使用了vuex,可以直接将值放入vuex中进行管理;
    &nbsp;&nbsp;&nbsp;&nbsp;4.从详情页中返回的时候,同时要做这样的操作,将你存入缓存中的scrollTop值重新赋予给当前div的滚动条
    &nbsp;&nbsp;&nbsp;&nbsp;5.Ok,思路就是这样子,大功告成。
    
    
    <h2>vue中具体实现</h2>
    我是用的vuex进行管理的滚动条位置,实现代码如下:
    
    //加了一个ref,用于获取当前dom
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    ``` ``` computed:{ ...mapGetters([ "home_list_top" //vuex中的存放的滚动条的位置 ]) } ... methods:{ recordScrollPosition(e) { this.$store.dispatch("setHomeListTop",e.target.scrollTop); //实时存入到vuex中 } } ... activated(){ //滚动条位置的监听放到activated是因为此页面被keep-alive缓存了 this.$refs.scroll.scrollTop = this.home_list_top; //this.$refs.scroll拿到滚动的dom,即scrollContainer,this.home_list_top是存入到vuex里的值 this.$refs.scroll.addEventListener("scroll",this.recordScrollPosition); //添加绑定事件 }, deactivated(){ //keep-alive 的页面跳转时,移除scroll事件 this.$refs.scroll.removeEventListener("scroll",this.recordScrollPosition); //清除绑定的scroll事件 } ```

    后话

    如果有更好的办法,互相交流。

    https://segmentfault.com/a/1190000012857661

    展开全文
  • vue禁止 页面滑动

    千次阅读 2019-03-12 14:55:30
    @touchmove.prevent
  • vue整屏滑动组件

    2018-04-13 18:25:00
    前几天做了vue整屏滑动,因为我的容器中使用了v-for所以我在updated中获取dom; updated(){  var outer = this.$refs.outerdiv; //获取视图容器  var inner = this.$refs.content; //获取包裹内容容器  ...
  • vue监听左右滑动事件

    千次阅读 2018-08-16 19:14:38
    引入 vue-touch **1**npm insall vue-touch@next 2在main.js中将vue-touch注入到vue import VueTouch from 'vue-touch' ...3用vur-touch将需要滑动的包裹起来 &lt;v-touch v-on:swipeleft="le...
  • vue-实现动态滑动列表

    2021-04-28 14:37:06
    vue内实现动态滑动列表 思路:通过定时器来控制,循环次数,每过3s开启定时器,触发事件;同时将数组内第一位的数据调用 push()转移到数组的末尾,并将其删除调用 shift()。move节点是存在与否来触发动画。 <...
  • vue使用better-scroll监听滑动事件

    千次阅读 2019-03-27 16:47:15
    vue使用better-scroll监听滑动效果 ps: 实现某元素吸顶 或 滑动到某个元素时固定显示 ,反之隐藏(根据需求) 使用: better-scroll插件 写的不好,不足之处,欢迎大家指导, 谢谢! 文章目录vue使用better-scroll...
  • H5滑动实现翻页(vue

    千次阅读 2019-05-04 17:04:07
    H5 滑动翻页 框架:Vue + element + ...转载:vue-awesome-swiper - 基于vue实现h5滑动翻页效果 已经打好vue-cli项目,安装vue-awesome-swiper npm i --s vue-awesome-swiper main.js import VueAwesomeSwiper...
  • event.offsetY 相对容器的垂直坐标  document.documentElement.scrollTop 垂直方向滚动的值  event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量  ...
  • Vue中,有三种方式可以实现H5页面滑动至指定位置 方法1: //先获取目标位置距离 mounted() { this.$nextTick(() => { setTimeout(() => { let targetbox= document....
  • 在web或移动端开发中,有时候我们需要做一个可滚动显示的banner、轮播...因为正做的项目是vue中需要用到滑动翻页效果,就用vue来实现一个垂直方向滑动翻页的效果咯! 核心触摸事件:touchstart、touchmove和to...
  • vue瀑布流组件滑动加载更多

    万次阅读 2017-07-18 17:56:19
    但是由于实际项目开发中由于需求变更或者说在webview中上拉加载有些机型在上拉时候会把webview也一起上拉导致上拉加载不灵敏等问题,我们有时候也会换成滑动到底部自动加载的功能。既然都是加载更多,很多代码思想...
  • vue实现上下无限滑动日历组件

    千次阅读 2018-07-24 20:25:13
    思路:用一个容器包裹三个用于显示每个月日历的div,当滚动条滚动到顶部时,设置scrollTop 等于第一个div的 offsetHeight。当滚动条滚动到底部时,设置scrollTop: e.target.scrollTop = e.target.scrollHeight...
  • better-scroll设定的容器内部,元素的高度发生变化之后,滑动区域边界变化。 处理方法 容器内部的元素变化时,调用better-scroll提供的refresh函数 注意 注意在元素变化之后再调用fresh,否则反而会出现其他错误。 ...
  • 在页面中经常会用到滚动,下拉刷新,下拉加载等...所以一般在项目中我都是用vue-scroller. vue-scroller文档 1.在项目中安装: npm i vue-scroller -S 2.在main.js中引用 import VueScroller from 'vue-scro...
  • 一共有两种方法,但是不论那种方法, ...不然监听不到滑动到屏幕上方的高度! <div class="person" ref="personDom" @scroll="handlerScroll($event)" ></div> 方法一:给指定div这是监听事件 mounted
  • vue自动滚动到容器底部

    万次阅读 2018-07-12 16:00:03
    做实时聊天时用到的场景:使用侦听属性watch,侦听改变的变量Talkwatch: { Talk() { this.$nextTick(() =&gt; { var container = this.$el.querySelector('#talk') container.scrollTop = container....
  • 在我们的开发中,用vue开发移动端时,如果使用原生滚动的话,在模拟器上面不会出现什么问题,但到了真机上面就会出现滑动不流畅的问题。那么我们可以使用滑动插件来解决这个问题,下面我们来说一下betterscroll这个...
  • vue-slide-card Vue 层叠卡片滑动切换、卡牌动态滑动...给最外层容器固定高度(视口高度),绑定三个滑动事件 hmtl: <template> <div @touchstart="playerTouchStart" @touchmove="playerTouchMove" ...
  • 但是我当时想到的却是,vue里边怎么用swiper?! 中国有句古话叫:天塌下来有个高的顶着。 在前端圈里,总有前仆后继的仁人志士相继挥洒着热汗(这里没有血),在我们小白需要用到两个技术结合的时候,他们...
  • 这里写自定义目录标题使用bootstrap的轮播轮播代码(不能触摸滑动)添加触摸事件 使用bootstrap的轮播 我最近写vue项目用到了bootstrap框架,其中轮播图我用的是bootstrap自带的轮播。但是变成手机端时,触摸无法滑动...
  • Vue实现了移动端开屏广告+滑动登录 2020-03-16 颓废了一天,今天做一个移动端的小Demo,因为脚手架占的空间比较大,就使用引入cdn的方式了,方便快捷一点。先上效果图 源码在...
  • 容器内内容足够多时才会显示滚动条,发生滚动且到达距离底部指定距离后将会触发onReachBottom事件。 容器高度由height控制。 距离底部距离由distance控制。 其他需求请自行修改相关代码。 一、封装组件代码 <...
  • vue-data-loading :loading="loading" :listens="['pull-down', 'infinite-scroll']" @infinite-scroll="infiniteScroll" @pull-down="pullDown"> <!--your data here--> </vue-data-loading> <...
  • VUE中使用swiper,swiper全屏滑动

    千次阅读 2019-04-24 16:09:01
    npm install --s vue-awesome-swiper 2,在main.js中使用 import vueAwesomeSwiper from 'vue-awesome-swiper' Vue.use(vueAwesomeSwiper); 3,在页面使用 <template> <div class="home"> <s...
  • 方案选择 最近在做一个项目,首页有很多条数据,所以想要让用户在跳转到另一个页面后再返回首页时,保持在原有的高度,使用了keepAlive加上activated钩子,也会出现很多其他问题,...1.滑动动组件时,主页面也跟着滚
  • 找半天才找到这个可用的 vue 脚手架中实现阿里云人机滑动验证 描述:照官网写的引入方式引入vue报错 AWSC is not define 解决:.html文件引入script标签后 <!-- 阿里滑块 --> <script src=...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,441
精华内容 976
关键字:

vue滑动容器

vue 订阅