自定义css动画参考

冷不防 2023-05-31 07:24 15阅读 0赞

/* 
        写属于自己的动画样式(参考 animate.css 动画库)
        */
    
    
        /* 默认基础类作用：为默认情况
            其他情况，可以[按需]修改默认情况(重新赋值)
        */
    
    
        /* 定义基础类 */
    
        .zc-animation {
        
            /* 执行所有动画名字 */
            animation: all;
            /* 默认每个动画执行时间 */
            animation-duration: 2s;
            /* 默认所有动画匀速执行 */
            animation-timing-function: linear;
        }
    
    
        /* 始终是否循环执行 */
    
        .infinite {
        
            animation-iteration-count: infinite;
        }
    
    
        /* 设置延迟执行时间 */
    
        .delay-1s {
        
            animation-delay: 1s;
        }
    
        .delay-2s {
        
            animation-delay: 2s;
        }
    
        .delay-3s {
        
            animation-delay: 3s;
        }
    
        .delay-4s {
        
            animation-delay: 4s;
        }
    
        .delay-5s {
        
            animation-delay: 5s;
        }
    
    
        /* 设置动画执行时间长短 */
    
        .fast {
        
            animation-duration: 800ms;
        }
    
        .faster {
        
            animation-duration: 500ms;
        }
    
        .slow {
        
            animation-duration: 3s;
        }
    
        .slower {
        
            animation-duration: 4s;
        }
    
    
        /* 设置不同动画执行速度 */
    
    
        /* 定义每一个动画样式 */
    
    
        /* bounce 弹跳 */
    
        @keyframes bounce {
        
            from,
            20%,
            53%,
            80%,
            to {
        
                animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
                transform: translate3d(0, 0, 0);
            }
            40%,
            43% {
        
                animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
                transform: translate3d(0, -30px, 0);
            }
            70% {
        
                animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
                transform: translate3d(0, -15px, 0);
            }
            90% {
        
                transform: translate3d(0, -4px, 0);
            }
        }
    
        .bounce {
        
            animation-name: bounce;
            transform-origin: center bottom;
        }
        /* 从内部弹 */
        @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%{
        
                transform: scale(0.3,0.3);
            }
            20%{
        
                transform: scale(1.3,1.3);
            }
            40%{
        
                transform: scale(0.6,0.6);
            }
            60%{
        
                transform: scale(1.15,1.15);
            }
            80%{
        
                transform: scale(0.9,0.9);
            }
    
    
        }
        .bounceIn{
        
            animation-name: bounceIn;
        }
        /* 从左侧弹 */
        @keyframes bounceLeft{
        
            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%{
        
                transform: translate(-3000px,0)
            }
            60%{
        
                transform: translate(25px,0)
            }
            70%{
        
                transform: translate(-15px,0)
            }
            90%{
        
                transform: translate(5px,0)
            }
        }
        .bounceLeft{
        
            animation-name: bounceLeft;
        }
        /* 从右侧弹 */
        @keyframes bounceRight{
        
            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%{
        
                transform: translate(3000px,0)
            }
            60%{
        
                transform: translate(-25px,0)
            }
            70%{
        
                transform: translate(15px,0)
            }
            90%{
        
                transform: translate(-5px,0)
            }
        }
        .bounceRight{
        
            animation-name: bounceRight;
        }
        /* 从上面弹 */
        @keyframes bounceTop{
        
            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%{
        
                transform: translate(0,-1000px)
            }
            60%{
        
                transform: translate(0,25px)
            }
            70%{
        
                transform: translate(0,-15px)
            }
            90%{
        
                transform: translate(0,5px)
            }
        }
        .bounceTop{
        
            animation-name: bounceTop;
        }
        /* 从下面弹 */
        @keyframes bounceBottom{
        
            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%{
        
                transform: translate(0,1000px)
            }
            60%{
        
                transform: translate(0,-25px)
            }
            70%{
        
                transform: translate(0,15px)
            }
            90%{
        
                transform: translate(0,-5px)
            }
        }
        .bounceBottom{
        
            animation-name: bounceBottom;
        }
    
        /* 闪烁 */
    
        @keyframes flash {
        
            /* 0% 50% 100%时  执行下面样式 */
            from,
            50%,
            to {
        
                opacity: 1;
            }
            25%,
            75% {
        
                opacity: 0;
            }
        }
    
        .flash {
        
            animation-name: flash;
        }
    
    
        /* 3频快闪 */
    
        @keyframes flasher {
        
            0%,
            33%,
            67%,
            100% {
        
                opacity: 1;
            }
            16%,
            48%,
            82% {
        
                opacity: 0;
            }
        }
    
        .flasher {
        
            animation-name: flasher;
        }
    
    
        /* 缩放 */
    
        @keyframes pules {
        
            0%,
            100% {
        
                transform: scale3d(1, 1, 1)
            }
            50% {
        
                transform: scale3d(1.2, 1.2, 1.2)
            }
        }
    
        .pules {
        
            animation-name: pules;
        }
    
    
        /* 字体放大动画 */
    
        @keyframes pulesFont {
        
            0%,
            100% {
        
                /* font-size: 16px; */
            }
            50% {
        
                font-size: 28px;
                letter-spacing: 10px;
            }
        }
    
        .pulesFont {
        
            animation-name: pulesFont;
        }
    
    
        /* 拉伸 */
    
        @keyframes rubberBand {
        
            from {
        
                transform: scale3d(1, 1, 1);
            }
            30% {
        
                transform: scale3d(1.25, 0.75, 1);
            }
            40% {
        
                transform: scale3d(0.75, 1.25, 1);
            }
            50% {
        
                transform: scale3d(1.15, 0.85, 1);
            }
            65% {
        
                transform: scale3d(0.95, 1.05, 1);
            }
            75% {
        
                transform: scale3d(1.05, 0.95, 1);
            }
            to {
        
                transform: scale3d(1, 1, 1);
            }
        }
    
        .rubberBand {
        
            animation-name: rubberBand;
        }
    
    
        /* 平移 */
    
        @keyframes shake {
        
            0%,
            100% {
        
                transform: translate3d(0, 0, 0)
            }
            10%,
            30%,
            50%,
            70%,
            90% {
        
                transform: translate3d(-10px, 0, 0)
            }
            20%,
            40%,
            60%,
            80% {
        
                transform: translate3d(10px, 0, 0)
            }
        }
    
        .shake {
        
            animation-name: shake;
        }
    
    
        /* 摇摆 */
    
        @keyframes swing {
        
            20% {
        
                /* 绕z轴旋转 15deg */
                transform: rotate3d(0, 0, 1, 15deg)
            }
            40% {
        
                transform: rotate3d(0, 0, 1, -10deg)
            }
            60% {
        
                transform: rotate3d(0, 0, 1, 5deg)
            }
            80% {
        
                transform: rotate3d(0, 0, 1, -5deg)
            }
            100% {
        
                transform: rotate3d(0, 0, 1, 0deg)
            }
        }
    
        .swing {
        
            animation-name: swing;
        }
    
    
        /* 摇摆缩放 */
    
        @keyframes graduallyPut {
        
            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);
            }
        }
    
        .graduallyPut {
        
            -webkit-animation-name: graduallyPut;
            animation-name: graduallyPut;
        }
        /* 摇晃转盘 */
        @keyframes turnTable{
        
            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);
              }
        }
    
        .turnTable {
        
            -webkit-animation-name: turnTable;
            animation-name: turnTable;
          }
    
        /* 拉伸 */
    
        @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;
          }
    
          /* 左侧闪现 */
          @keyframes lightenOut{
        
              0%,50%,10%{
        
                  transform: rotate3d(0,0,0);
              }
              25%,75%{
        
                  transform: rotateY(90deg)
              }
          }
          .lightenOutleft{
        
              animation-name: lightenOut;
              /* 转到轴心的位置 */
              transform-origin: left;
          }
          .lightenOutright{
        
              animation-name: lightenOut;
              transform-origin: right;
          }
          .lightenOutcenter{
        
              animation-name: lightenOut;
              transform-origin: center;
          }
    
          /* 开幕式动画 */
          @keyframes inauguration{
        
              from{
        
                  transform: rotateX(90deg);
              }
              to{
        
                transform: rotate3d(0,0,0)
              }
          }
          .inauguration{
        
              animation-name: inauguration;
              transform-origin: center;
          }
          .inaugurationTop{
        
              animation-name: inauguration;
              transform-origin: top;
          }
          .inaugurationBottom{
        
              animation-name: inauguration;
              transform-origin: bottom;
          }
    
          /*  */
          @keyframes heartBeat{
        
              from,50%,to{
        
                transform: scale(1)
              }
              25%,60%{
        
                transform: scale(1.5,1.3)
              }
          }
          .heartBeat{
        
              animation-name: heartBeat;
          }
    
    
    
    
    
    
    
    
    
    
          /* 淡入 */
    @keyframes fadeIn{
        
        /* 通过设置透明度来实现淡入效果 */
        from{
        
            opacity: 0;
        }
        to{
        
            opacity: 1;
        }
    }
    .fadeIn{
        
        animation-name: fadeIn;
    }
    
    /* 淡入往下 */
    @keyframes fadeInDown{
        
        /* 通过设置透明度来实现色差效果，并通过平移-y轴来实现往下的效果 */
        from{
        
            opacity: 0;
            transform: translate3d(0,-100px,0);
        }
        to{
        
            opacity: 1;
            transform: translate3d(0,0,0);
        }
    }
    .fadeInDown{
        
        animation-name: fadeInDown;
    }
    
    /* 淡入从上往下的距离变大 */
    @keyframes fadeInDownBig{
        
        /* 通过设置透明度来实现色差效果，并通过加大-y轴的距离来实现往下平移且距离增大的效果， */
        from{
        
            opacity: 0;
            transform: translate3d(0,-2000px,0);
        }
        to{
        
            opacity: 1;
            transform: translate3d(0,0,0);
        }
    }
    .fadeInDownBig{
        
        animation-name: fadeInDownBig;
    }
    
    /* 从左侧淡入 */
    @keyframes fadeInLeft{
        
        /* 通过设置透明度来实现色差效果，并通过平移-x轴实现从左侧淡入的效果 */
        from{
        
            opacity: 0;
            transform: translate3d(-100%,0,0);
        }
        to{
        
            opacity: 1;
            transform: translate3d(0,0,0);
        }
    }
    .fadeInLeft{
        
        animation-name: fadeInLeft;
    }
    /* 淡入从左往右的距离变大 */
    @keyframes fadeInLeftBig {
        
        /* 通过设置透明度来实现色差效果，并通过加大-x轴的距离来实现从左往右平移且距离增大的效果， */
        from {
        
          opacity: 0;
          transform: translate3d(-2000px, 0, 0);
        }
      
        to {
        
          opacity: 1;
          transform: translate3d(0, 0, 0);
        }
      }
      
      .fadeInLeftBig {
        
        animation-name: fadeInLeftBig;
      }
      /* 从右侧淡入 */
      @keyframes fadeInRight {
        
          /* 通过设置透明度来实现色差效果，并通过平移x轴实现从右侧淡入的效果 */
        from {
        
          opacity: 0;
          transform: translate3d(100%, 0, 0);
        }
      
        to {
        
          opacity: 1;
          transform: translate3d(0, 0, 0);
        }
      }
      
      .fadeInRight {
        
        animation-name: fadeInRight;
      }
    
      /* 淡入从右往左的距离变大 */
      @keyframes fadeInRightBig {
        
          /* 通过设置透明度来实现色差效果，并通过加大x轴的距离来实现从左往右平移且距离增大的效果*/
        from {
        
          opacity: 0;
          transform: translate3d(2000px, 0, 0);
        }
      
        to {
        
          opacity: 1;
          transform: translate3d(0, 0, 0);
        }
      }
      
      .fadeInRightBig {
        
        animation-name: fadeInRightBig;
      }
    
      /* 淡入往上 */
      @keyframes fadeInUp {
        
          /* 通过设置透明度来实现色差效果，并通过平移y轴来实现往上的效果 */ 
        from {
        
          opacity: 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;
      }
    
    /* 淡入往上距离变大 */
      @keyframes fadeInUpBig {
        
          /* 通过设置透明度来实现色差效果，并通过加大y轴的距离来实现从下往上平移且距离增大的效果， */
        from {
        
          opacity: 0;
          transform: translate3d(0, 2000px, 0);
        }
      
        to {
        
          opacity: 1;
          transform: translate3d(0, 0, 0);
        }
      }
      
      .fadeInUpBig {
        
        animation-name: fadeInUpBig;
      }