////////动画////////
//@keyframes myfirst
//{
//    0%   {background: red;}
//    25%  {background: yellow;}
//    50%  {background: blue;}
//    100% {background: green;}
//}
//
//@-moz-keyframes myfirst // Firefox
//{
//    0%   {background: red;}
//    25%  {background: yellow;}
//    50%  {background: blue;}
//    100% {background: green;}
//}
//
//@-webkit-keyframes myfirst // Safari 和 Chrome
//{
//    0%   {background: red;}
//    25%  {background: yellow;}
//    50%  {background: blue;}
//    100% {background: green;}
//}
//
//@-o-keyframes myfirst // Opera
//{
//    0%   {background: red;}
//    25%  {background: yellow;}
//    50%  {background: blue;}
//    100% {background: green;}
//}

//div{
//    animation-name: myfirst;
//    animation-duration: 5s;
//    animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n);n为0-1
//    animation-delay: 2s;
//    animation-iteration-count: n | infinite;
//    animation-direction: normal | alternate;
//    animation-play-state: paused | running;
//    animation-fill-mode: none | forwards | backwards | both;
//    //Firefox:
//    -moz-animation-name: myfirst;
//    -moz-animation-duration: 5s;
//    -moz-animation-timing-function: linear;
//    -moz-animation-delay: 2s;
//    -moz-animation-iteration-count: infinite;
//    -moz-animation-direction: alternate;
//    -moz-animation-play-state: running;
//    //Safari 和 Chrome:
//    -webkit-animation-name: myfirst;
//    -webkit-animation-duration: 5s;
//    -webkit-animation-timing-function: linear;
//    -webkit-animation-delay: 2s;
//    -webkit-animation-iteration-count: infinite;
//    -webkit-animation-direction: alternate;
//    -webkit-animation-play-state: running;
//    //Opera:
//    -o-animation-name: myfirst;
//    -o-animation-duration: 5s;
//    -o-animation-timing-function: linear;
//    -o-animation-delay: 2s;
//    -o-animation-iteration-count: infinite;
//    -o-animation-direction: alternate;
//    -o-animation-play-state: running;
//}


[class*=dam-] {
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-out;
  -moz-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fade-in {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}

@-moz-keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.dam-fade-in {
    -webkit-animation-name: fade-in;
    -moz-animation-name: fade-in;
    animation-name: fade-in;
}

@-webkit-keyframes fade-out {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-moz-keyframes fade-out {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.dam-fade-out {
  -webkit-animation-name: fade-out;
  -moz-animation-name: fade-out;
  animation-name: fade-out;
}

@-webkit-keyframes scale-x {
    0% {
        opacity: 0;
        -webkit-transform: scaleX(0);
    }
    100% {
        opacity: 1;
        -webkit-transform: scaleX(1);
    }
}

@keyframes scale-x {
    0% {
        opacity: 0;
        transform: scaleX(0);
    }
    100% {
        opacity: 1;
        transform: scaleX(1);
    }
}

.dam-scale-x {
    -webkit-animation-name: scale-x;
    -moz-animation-name: scale-x;
    animation-name: scale-x;
}

@-webkit-keyframes scale-y {
    0% {
        opacity: 1;
        -webkit-transform: scaleY(1);
    }
    100% {
        opacity: 0;
        -webkit-transform: scaleY(0);
    }
}

@keyframes scale-y {
    0% {
        opacity: 1;
        transform: scaleY(1);
    }
    100% {
        opacity: 0;
        transform: scaleY(0);
    }
}

.dam-scale-y {
    -webkit-animation-name: scale-y;
    -moz-animation-name: scale-y;
    animation-name: scale-y;
}

@-webkit-keyframes zoom-in {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
    }
}

@keyframes zoom-in {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.dam-zoom-in {
    -webkit-animation-name: zoom-in;
    -moz-animation-name: zoom-in;
    animation-name: zoom-in;
}

@-webkit-keyframes zoom-out {
    0% {
        opacity: 1;
        -webkit-transform: scale(1);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(0);
    }
}

@keyframes zoom-out {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0);
    }
}

.dam-zoom-out {
    -webkit-animation-name: zoom-out;
    -moz-animation-name: zoom-out;
    animation-name: zoom-out;
}

@-webkit-keyframes slide-up {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@keyframes slide-up {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.dam-slide-up {
    -webkit-animation-name: slide-up;
    -moz-animation-name: slide-up;
    animation-name: slide-up;
}

@-webkit-keyframes slide-down {
    0% {
        opacity: 0;
        -webkit-transform: translateY(100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@keyframes slide-down {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.dam-slide-down {
    -webkit-animation-name: slide-down;
    -moz-animation-name: slide-down;
    animation-name: slide-down;
}

@-webkit-keyframes slide-left {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

@keyframes slide-left {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.dam-slide-left {
    -webkit-animation-name: slide-left;
    -moz-animation-name: slide-left;
    animation-name: slide-left;
}

@-webkit-keyframes slide-right {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

@keyframes slide-right {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.dam-slide-right {
  -webkit-animation-name: slide-right;
  -moz-animation-name: slide-right;
  animation-name: slide-right;
}

// 旋转
@keyframes rotating {
  0% {
    transform: rotate(0deg)
  }
  to {
    transform: rotate(1turn)
  }
}
.dam-rotating {
  animation: rotating 2s linear infinite;
}

@keyframes bounce-in {
  from, 20%, 40%, 60%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }

  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    transform: scale3d(.97, .97, .97);
  }

  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

.dam-bounce-in {
  animation-name: bounce-in;
}

@keyframes bounce-in-down {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }

  75% {
    transform: translate3d(0, -10px, 0);
  }

  90% {
    transform: translate3d(0, 5px, 0);
  }

  to {
    transform: none;
  }
}

.dam-bounce-in-down {
  animation-name: bounce-in-down;
}

@keyframes bounce-in-left {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }

  75% {
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    transform: translate3d(5px, 0, 0);
  }

  to {
    transform: none;
  }
}

.dam-bounce-in-left {
  animation-name: bounce-in-left;
}

@keyframes bounce-in-right {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    transform: translate3d(10px, 0, 0);
  }

  90% {
    transform: translate3d(-5px, 0, 0);
  }

  to {
    transform: none;
  }
}

.dam-bounce-in-right {
  animation-name: bounce-in-right;
}

@keyframes bounce-in-up {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }

  75% {
    transform: translate3d(0, 10px, 0);
  }

  90% {
    transform: translate3d(0, -5px, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.dam-bounce-in-up {
  animation-name: bounce-in-up;
}

@keyframes bounce-out {
  20% {
    transform: scale3d(.9, .9, .9);
  }

  50%, 55% {
    opacity: 1;
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }
}

.dam-bounce-out {
  animation-name: bounce-out;
}

@keyframes bounce-out-down {
  20% {
    transform: translate3d(0, 10px, 0);
  }

  40%, 45% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}

.dam-bounce-out-down {
  animation-name: bounce-out-down;
}

@keyframes bounce-out-left {
  20% {
    opacity: 1;
    transform: translate3d(20px, 0, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0);
  }
}

.dam-bounce-out-left {
  animation-name: bounce-out-left;
}

@keyframes bounce-out-right {
  20% {
    opacity: 1;
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(2000px, 0, 0);
  }
}

.dam-bounce-out-right {
  animation-name: bounce-out-right;
}

@keyframes bounce-out-up {
  20% {
    transform: translate3d(0, -10px, 0);
  }

  40%, 45% {
    opacity: 1;
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}

.dam-bounce-out-up {
  animation-name: bounce-out-up;
}