/*
* @Author: jin
* @Date:   2016-11-28 14:52:25
* @Last Modified by:   Administrator
* @Last Modified time: 2018-03-04 14:42:27
*/
.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;
}


@-webkit-keyframes slideInDown {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

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

@keyframes slideInDown {
  0% {
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

.slideInDown {
  -webkit-animation-name: slideInDown;
          animation-name: slideInDown;
}

@-webkit-keyframes slideInDown1 {
  0% {
    -webkit-transform: translate3d(0, -95%, 0);
    visibility: visible;
  }

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

@keyframes slideInDown1 {
  0% {
    transform: translate3d(0, -95%, 0);
    visibility: visible;
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

.slideInDown1 {
  -webkit-animation-name: slideInDown1;
          animation-name: slideInDown1;
}

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

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

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

@-webkit-keyframes narrowIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(1.3, 1.3, 1.3);
    }

    50% {
        opacity: 1;
    }
}

@keyframes narrowIn {
    0% {
        opacity: 0;
        transform: scale3d(1.3, 1.3, 1.3);
    }

    50% {
        opacity: 1;
    }
}

.narrowIn {
    -webkit-animation-name: narrowIn;
            animation-name: narrowIn;
}

@-webkit-keyframes zoomIninfinite {
    0%,100% {
      -webkit-transform: scale3d(1, 1, 1);
    }

    50% {
      -webkit-transform: scale3d(.9, .9, .9);
    }
}

@keyframes zoomIninfinite {
    0%,100% {
      transform: scale3d(1, 1, 1);
    }

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

.zoomIninfinite {
    -webkit-animation-name: zoomIninfinite;
            animation-name: zoomIninfinite;
}

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

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

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

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

.fadeInUp {
  -webkit-animation-name: fadeInUp;
          animation-name: fadeInUp;
}

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

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -200%, 0);
  }
}

@keyframes fadeOutUp200 {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  100% {
    opacity: 0;
    transform: translate3d(0, -200%, 0);
  }
}

.fadeOutUp200 {
  -webkit-animation-name: fadeOutUp200;
          animation-name: fadeOutUp200;
}

@-webkit-keyframes avatarSwing {
  0% {
    -webkit-transform: rotate(6deg);
  }

  25% {
    -webkit-transform: rotate(0deg);
  }

  50% {
    -webkit-transform: rotate(-6deg);
  }

  75% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(6deg);
  }

}

@keyframes avatarSwing {
  0% {
    transform: rotate(6deg);
  }

  25% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(-6deg);
  }

  75% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(6deg);
  }

}
.avatarSwing {
  -webkit-animation-name: avatarSwing;
          animation-name: avatarSwing;
}

/* 音符翻动 */
@-webkit-keyframes music-left-1 {
  0% {
    opacity: 1;
    -webkit-transform: none;
    -webkit-transform-origin: 50% 50%;
  }
  20% {
    opacity: 0.8;
    -webkit-transform: translate3d(-100%, -50%, 0) rotate(-180deg);
    -webkit-transform-origin: 50% 50%;
  }
  40% {
    opacity: 0.6;
    -webkit-transform: translate3d(-200%, -100%, 0) rotate(-360deg);
    -webkit-transform-origin: 50% 50%;
  }
  60% {
    opacity: 0.4;
    -webkit-transform: translate3d(-300%, -150%, 0) rotate(-540deg);
    -webkit-transform-origin: 50% 50%;
  }
  80% {
    opacity: 0.2;
    -webkit-transform: translate3d(-400%, -200%, 0) rotate(-720deg);
    -webkit-transform-origin: 50% 50%;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-500%, -250%, 0) rotate(-900deg);
    -webkit-transform-origin: 50% 50%;
  }
}
@keyframes music-left-1 {
  0% {
    opacity: 1;
    transform: none;
    transform-origin: 50% 50%;
  }
  20% {
    opacity: 0.8;
    transform: translate3d(-100%, -50%, 0) rotate(-180deg);
    transform-origin: 50% 50%;
  }
  40% {
    opacity: 0.6;
    transform: translate3d(-200%, -100%, 0) rotate(-360deg);
    transform-origin: 50% 50%;
  }
  60% {
    opacity: 0.4;
    transform: translate3d(-300%, -150%, 0) rotate(-540deg);
    transform-origin: 50% 50%;
  }
  80% {
    opacity: 0.2;
    transform: translate3d(-400%, -200%, 0) rotate(-720deg);
    transform-origin: 50% 50%;
  }
  100% {
    opacity: 0;
    transform: translate3d(-500%, -250%, 0) rotate(-900deg);
    transform-origin: 50% 50%;
  }
}
@-webkit-keyframes music-left-2 {
  0% {
    opacity: 1;
    -webkit-transform: none;
    -webkit-transform-origin: 50% 50%;
  }
  20% {
    opacity: 0.8;
    -webkit-transform: translate3d(-50%, -150%, 0) rotate3d(1,1,1,-180deg);
    -webkit-transform-origin: 50% 50%;
  }
  40% {
    opacity: 0.6;
    -webkit-transform: translate3d(-100%, -300%, 0) rotate3d(1,1,1,-360deg);
    -webkit-transform-origin: 50% 50%;
  }
  60% {
    opacity: 0.4;
    -webkit-transform: translate3d(-150%, -450%, 0) rotate3d(1,1,1,-540deg);
    -webkit-transform-origin: 50% 50%;
  }
  80% {
    opacity: 0.2;
    -webkit-transform: translate3d(-200%, -600%, 0) rotate3d(1,1,1,-720deg);
    -webkit-transform-origin: 50% 50%;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-250%, -750%, 0) rotate3d(1,1,1,-900deg);
    -webkit-transform-origin: 50% 50%;
  }
}
@keyframes music-left-2 {
  0% {
    opacity: 1;
    transform: none;
    transform-origin: 50% 50%;
  }
  20% {
    opacity: 0.8;
    transform: translate3d(-50%, -150%, 0) rotate3d(1,1,1,-180deg);
    transform-origin: 50% 50%;
  }
  40% {
    opacity: 0.6;
    transform: translate3d(-100%, -300%, 0) rotate3d(1,1,1,-360deg);
    transform-origin: 50% 50%;
  }
  60% {
    opacity: 0.4;
    transform: translate3d(-150%, -450%, 0) rotate3d(1,1,1,-540deg);
    transform-origin: 50% 50%;
  }
  80% {
    opacity: 0.2;
    transform: translate3d(-200%, -600%, 0) rotate3d(1,1,1,-720deg);
    transform-origin: 50% 50%;
  }
  100% {
    opacity: 0;
    transform: translate3d(-250%, -750%, 0) rotate3d(1,1,1,-900deg);
    transform-origin: 50% 50%;
  }
}
@-webkit-keyframes music-left-3 {
  0% {
    opacity: 1;
    -webkit-transform: none;
    -webkit-transform-origin: 50% 50%;
  }
  20% {
    opacity: 0.8;
    -webkit-transform: translate3d(-100%, 15%, 0) rotate3d(1,1,1,-180deg);
    -webkit-transform-origin: 50% 50%;
  }
  40% {
    opacity: 0.6;
    -webkit-transform: translate3d(-200%, 30%, 0) rotate3d(1,1,1,-360deg);
    -webkit-transform-origin: 50% 50%;
  }
  60% {
    opacity: 0.4;
    -webkit-transform: translate3d(-300%, 45%, 0) rotate3d(1,1,1,-540deg);
    -webkit-transform-origin: 50% 50%;
  }
  80% {
    opacity: 0.2;
    -webkit-transform: translate3d(-400%, 60%, 0) rotate3d(1,1,1,-720deg);
    -webkit-transform-origin: 50% 50%;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-500%, 75%, 0) rotate3d(1,1,1,-900deg);
    -webkit-transform-origin: 50% 50%;
  }
}
@keyframes music-left-3 {
  0% {
    opacity: 1;
    transform: none;
    transform-origin: 50% 50%;
  }
  20% {
    opacity: 0.8;
    transform: translate3d(-100%, 15%, 0) rotate3d(1,1,1,-180deg);
    transform-origin: 50% 50%;
  }
  40% {
    opacity: 0.6;
    transform: translate3d(-200%, 30%, 0) rotate3d(1,1,1,-360deg);
    transform-origin: 50% 50%;
  }
  60% {
    opacity: 0.4;
    transform: translate3d(-300%, 45%, 0) rotate3d(1,1,1,-540deg);
    transform-origin: 50% 50%;
  }
  80% {
    opacity: 0.2;
    transform: translate3d(-400%, 60%, 0) rotate3d(1,1,1,-720deg);
    transform-origin: 50% 50%;
  }
  100% {
    opacity: 0;
    transform: translate3d(-500%, 75%, 0) rotate3d(1,1,1,-900deg);
    transform-origin: 50% 50%;
  }
}


@-webkit-keyframes handing {
  0%,100% {
    opacity: 1;
    -webkit-transform: translate(100%, -100%);
  }


  50% {
    opacity: 1;
    -webkit-transform: translate(-100%, 100%);
  }
}

@keyframes handing {
  0%,100% {
    opacity: 1;
    transform: translate(100%, -100%);
  }

  50% {
    opacity: 1;
    transform: translate(-100%, 100%);
  }
}

.handing {
  -webkit-animation-name: handing;
          animation-name: handing;
}


/* @-webkit-keyframes floating {
  0%,100% {
    -webkit-transform: translate3d(0, 0px, 0);
    transform: translate3d(0, 0px, 0);
  }
  25% {
    -webkit-transform: translate3d(0, 3px, 0);
    transform: translate3d(0, 3px, 0);
  }
  50% {
    -webkit-transform: translate3d(0, 0px, 0);
    transform: translate3d(0, 0px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, -3px, 0);
    transform: translate3d(0, -3px, 0);
  }
}
@keyframes floating {
  0%,100% {
    -webkit-transform: translate3d(0, 0px, 0);
    transform: translate3d(0, 0px, 0);
  }
  25% {
    -webkit-transform: translate3d(0, 3px, 0);
    transform: translate3d(0, 3px, 0);
  }
  50% {
    -webkit-transform: translate3d(0, 0px, 0);
    transform: translate3d(0, 0px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, -3px, 0);
    transform: translate3d(0, -3px, 0);
  }
}
.floating {
  -webkit-animation-name: floating;
  animation-name: floating;
} */


/* @-webkit-keyframes swing {
	20% {
		-webkit-transform: rotate(15deg);
	}

	40% {
		-webkit-transform: rotate(-10deg);
	}

	60% {
		-webkit-transform: rotate(5deg);
	}

	80% {
		-webkit-transform: rotate(-5deg);
	}

	to {
		-webkit-transform: rotate(0deg);
	}

}
@keyframes swing {
	20% {
		transform: rotate(15deg);
	}

	40% {
		transform: rotate(-10deg);
	}

	60% {
		transform: rotate(5deg);
	}

	80% {
		transform: rotate(-5deg);
	}

	to {
		transform: rotate(0deg);
	}

} */