.step.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.step.forwards{
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
}

.fadeIn {
        animation-name: fadeIn;
        -webkit-animation-name: fadeIn; 

        animation-duration: 1s;
        -webkit-animation-duration: 1s;

        animation-timing-function: ease-in-out; 
        -webkit-animation-timing-function: ease-in-out;     

        
    }

    @keyframes fadeIn {
        0% {
            transform: scale(0);
            opacity: 0.0;       
        }

        100% {
            transform: scale(1);
            opacity: 1; 
        }       
    }

    @-webkit-keyframes fadeIn {
        0% {
             transform: scale(0);
            opacity: 0.0;
        }

        100% {
            transform: scale(1);
            opacity: 1;
        }
    }


    /*透明度闪动*/
.fadeFlash {
    animation-name: fadeFlash;
    -webkit-animation-name: fadeFlash;

    animation-duration: 2s;
    -webkit-animation-duration: 2s;

    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;


}

@-webkit-keyframes fadeFlash {
    0%{
        opacity: 0;
    }

    25%{
        opacity: 1;
    }
    50%{
        opacity: .5;
    }
    75%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}


/*红线伸长动画*/
.flaxLine{
    animation-name: flexline;
    -webkit-animation-name: flexline;

    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;

    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;

}
@keyframes flexline{
    from {width:0;}
    to {width:100%;}
}

@-webkit-keyframes flexline{
    from {width:0;}
    to {width:100%;}
}
    /*红色边框闪动*/
    .borderFlash{
        animation-name: borderFlash;
        -webkit-animation-name: borderFlash;

        animation-duration: 1s;
        -webkit-animation-duration: 1s;

        animation-timing-function: ease-in-out;
        -webkit-animation-timing-function: ease-in-out;
    }

    @-webkit-keyframes borderFlash {
        0%{
            border-color: rgba(255,0,0,0);
        }
        25%{
            border-color: rgba(255,0,0,1);
        }
        50%{
            border-color: rgba(255,0,0,0);
        }
        75%{
            border-color: rgba(255,0,0,1);
        }
        100%{
            border-color: rgba(255,0,0,1);
        }
    }

    @keyframes borderFlash {
        0%{
            border-color: rgba(255,0,0,0);
        }
        25%{
            border-color: rgba(255,0,0,1);
        }
        50%{
            border-color: rgba(255,0,0,0);
        }
        75%{
            border-color: rgba(255,0,0,1);
        }
        100%{
            border-color: rgba(255,0,0,1);
        }
    }


/*重力砸下特效*/
.forceDown{
    animation-name: forceDown;
    -webkit-animation-name: forceDown;

    animation-duration: .5s;
    -webkit-animation-duration: .5s;

    animation-timing-function: ease-in;
    -webkit-animation-timing-function: ease-in;
}

@-webkit-keyframes forceDown {
    0%{
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    50%{
        opacity: 1;
    }

    80%{

        -webkit-transform: translate3d(0, 4%, 0);
        transform: translate3d(0, 4%, 0);
    }
    90%{

        -webkit-transform: translate3d(0, -4%, 0);
        transform: translate3d(0, -4%, 0);
    }

    100%{
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}






    .slideLeft{
        animation-name: slideLeft;
        -webkit-animation-name: slideLeft;  

        animation-duration: 1s;
        -webkit-animation-duration: 1s;

        animation-timing-function: ease-in-out; 
        -webkit-animation-timing-function: ease-in-out;     

        
    }

    @keyframes slideLeft {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(-100%, 0, 0);
                    transform: translate3d(-100%, 0, 0);
          }

          100% {
            opacity: 1;
            -webkit-transform: none;
                    transform: none;
          }
    }

    @-webkit-keyframes slideLeft {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(-100%, 0, 0);
                    transform: translate3d(-100%, 0, 0);
          }

          100% {
            opacity: 1;
            -webkit-transform: none;
                    transform: none;
          }
    }
    .slideRight{
        animation-name: slideRight;
        -webkit-animation-name: slideRight;  

        animation-duration: 1s;
        -webkit-animation-duration: 1s;

        animation-timing-function: ease-in-out; 
        -webkit-animation-timing-function: ease-in-out;     

        
    }

    @keyframes slideRight {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(100%, 0, 0);
                    transform: translate3d(100%, 0, 0);
          }

          100% {
            opacity: 1;
            -webkit-transform: none;
                    transform: none;
          }
    }

    @-webkit-keyframes slideRight {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(100%, 0, 0);
                    transform: translate3d(100%, 0, 0);
          }

          100% {
            opacity: 1;
            -webkit-transform: none;
                    transform: none;
          }
    }
    .slideUp {
        animation-name: slideUp;
        -webkit-animation-name: slideUp;  

        animation-duration: 1.5s; 
        -webkit-animation-duration: 1.5s;

        animation-timing-function: ease-in-out; 
        -webkit-animation-timing-function: ease-in-out;     

        
    }

    @keyframes slideUp {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(0, -100%, 0);
                    transform: translate3d(0, -100%, 0);
          }

          100% {
            opacity: 1;
            -webkit-transform: none;
                    transform: none;
          }
    }

    @-webkit-keyframes slideUp {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(0, -100%, 0);
                    transform: translate3d(0, -100%, 0);
          }

          100% {
            opacity: 1;
            -webkit-transform: none;
                    transform: none;
          }
    }
    .slideDown {
        animation-name: slideDown;
        -webkit-animation-name: slideDown;  

        animation-duration: 1s; 
        -webkit-animation-duration: 1s;

        animation-timing-function: ease-in-out; 
        -webkit-animation-timing-function: ease-in-out;     

        
    }

    @keyframes slideDown {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(0, 100%, 0);
                    transform: translate3d(0, 100%, 0);
          }

          100% {
            opacity: 1;
            -webkit-transform: none;
                    transform: none;
          }
    }

    @-webkit-keyframes slideDown {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(0, 100%, 0);
                    transform: translate3d(0, 100%, 0);
          }

          100% {
            opacity: 1;
            -webkit-transform: none;
                    transform: none;
          }
    }
    .rotateIn {
        animation-name: rotateIn;
        -webkit-animation-name: rotateIn;  

        animation-duration: 1s; 
        -webkit-animation-duration: 1s;

        animation-timing-function: ease-in-out; 
        -webkit-animation-timing-function: ease-in-out;     

        
    }

    @keyframes rotateIn {
        0% {
            -webkit-transform-origin: center;
                    transform-origin: center;
            -webkit-transform: rotate3d(0, 0, 1, -200deg);
                    transform: rotate3d(0, 0, 1, -200deg);
            opacity: 0;
          }

          100% {
            -webkit-transform-origin: center;
                    transform-origin: center;
            -webkit-transform: none;
                    transform: none;
            opacity: 1;
          }
    }

    @-webkit-keyframes rotateIn {
        0% {
            -webkit-transform-origin: center;
                    transform-origin: center;
            -webkit-transform: rotate3d(0, 0, 1, -200deg);
                    transform: rotate3d(0, 0, 1, -200deg);
            opacity: 0;
          }

          100% {
            -webkit-transform-origin: center;
                    transform-origin: center;
            -webkit-transform: none;
                    transform: none;
            opacity: 1;
          }
    }
    .zoomIn {
        animation-name: zoomIn;
        -webkit-animation-name: zoomIn;  

        animation-duration: 1s; 
        -webkit-animation-duration: 1s;

        animation-timing-function: ease-in-out; 
        -webkit-animation-timing-function: ease-in-out;     

        
    }
    @-webkit-keyframes zoomIn {
      0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
                transform: scale3d(.3, .3, .3);
      }

      50% {
        opacity: 1;
      }
    }

    @keyframes zoomIn {
      0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
                transform: scale3d(.3, .3, .3);
      }

      50% {
        opacity: 1;
      }
    }
    .heartBeat{
        animation-name: heartBeat;
        -webkit-animation-name: heartBeat;  

        animation-duration: 1.5s;   
        -webkit-animation-duration: 1.5s;

        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
    }

    @keyframes heartBeat {
        0% {
            transform: scale(0.9);
            opacity: 0.7;       
        }
        50% {
            transform: scale(1);
            opacity: 1; 
        }   
        100% {
            transform: scale(0.9);
            opacity: 0.7;   
        }           
    }

    @-webkit-keyframes heartBeat {
        0% {
            -webkit-transform: scale(0.95);
            opacity: 0.7;       
        }
        50% {
            -webkit-transform: scale(1);
            opacity: 1; 
        }   
        100% {
            -webkit-transform: scale(0.95);
            opacity: 0.7;   
        }           
    }
    .rollInLeft {
      animation-name: rollInLeft;
      -webkit-animation-name: rollInLeft;  

      animation-duration: 1s;   
      -webkit-animation-duration: 1s;
        
      animation-timing-function: ease-in-out; 
      -webkit-animation-timing-function: ease-in-out;    
    }
    @-webkit-keyframes rollInLeft {
      0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
                transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
      }

      100% {
        opacity: 1;
        -webkit-transform: none;
                transform: none;
      }
    }

    @keyframes rollInLeft {
      0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
                transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
      }

      100% {
        opacity: 1;
        -webkit-transform: none;
                transform: none;
      }
    }
    .rollInRight {
      animation-name: rollInRight;
      -webkit-animation-name: rollInRight;  

      animation-duration: 1s;   
      -webkit-animation-duration: 1s;
        
      animation-timing-function: ease-in-out; 
      -webkit-animation-timing-function: ease-in-out;    
    }
    @-webkit-keyframes rollInRight {
      0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
                transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
      }

      100% {
        opacity: 1;
        -webkit-transform: none;
                transform: none;
      }
    }

    @keyframes rollInRight {
      0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
                transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
      }

      100% {
        opacity: 1;
        -webkit-transform: none;
                transform: none;
      }
    }