/*css 动画  */
/*按钮持续扩散*/
@keyframes circleScale {0% {opacity: 1;-webkit-transform: scale(0);-moz-transform: scale(0);-ms-transform: scale(0);transform: scale(0);}
  100% {opacity: 0;-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);transform: scale(1);}
}
@keyframes circleScale1 {0% {opacity: 1;-webkit-transform: scale(0);-moz-transform: scale(0);-ms-transform: scale(0);transform: scale(0);}
  60% {opacity: 1;}
  100% {opacity: 0;-webkit-transform: scale(3);-moz-transform: scale(3);-ms-transform: scale(3);transform: scale(3);}
}

/* 360度旋转动画 */
/* 
  animation: myfirst 10s linear infinite;*/
@keyframes myfirst {0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}
@-webkit-keyframes myfirst {0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

@keyframes myfirst1 {0% {transform: rotate(360deg);}
  100% {transform: rotate(0deg);}
}
@-webkit-keyframes myfirst1 {0% {transform: rotate(360deg);}
  100% {transform: rotate(0deg);}
}

/* 圆形扩散效果 */
/* animation: scalemap 2s linear infinite;*/
@keyframes scalemap {0% {transform: translate(-50%, -50%) scale(0.2);opacity: .6;}

  100% {transform: translate(-50%, -50%) scale(1.5);opacity: 0;}
}


/*  animation: shubiao 1s infinite linear .65s;*/
@keyframes shubiao {0% {transform: scale(1);opacity: 0;}
  33% {transform: scale(1.5);opacity: .5;}
  66% {transform: scale(2);opacity: .5;}
  100% {transform: scale(1);opacity: 1;}
}

@keyframes shubiao3 {0% {transform: scale(1);opacity: 0;}
  33% {transform: scale(2);opacity: .5;}
  66% {transform: scale(2.5);opacity: .5;}
  100% {transform: scale(1);opacity: 1;}
}

/* 按钮动画 */
@-webkit-keyframes anim-moema-1 {60% {-webkit-transform: scale3d(0.8, 0.8, 1);transform: scale3d(0.8, 0.8, 1);}
	85% {-webkit-transform: scale3d(1.1, 1.1, 1);transform: scale3d(1.1, 1.1, 1);}
	100% {-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}
}
@keyframes anim-moema-1 {60% {-webkit-transform: scale3d(0.8, 0.8, 1);transform: scale3d(0.8, 0.8, 1);}
	85% {-webkit-transform: scale3d(1.1, 1.1, 1);transform: scale3d(1.1, 1.1, 1);}
	100% {-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}
}

@keyframes DIYzoomIn {0% {opacity: 0;-webkit-transform: scale3d(1.5, 1.5, 1.5);-ms-transform: scale3d(1.5, 1.5, 1.5);transform: scale3d(1.5, 1.5, 1.5);}
  50% {opacity: 1;}
}
.DIYzoomIn {-webkit-animation-name: DIYzoomIn;animation-name: DIYzoomIn;}


@keyframes DIYfadeInRight {0% {-webkit-transform: translate3d(100%, 0, 0);transform: translate3d(100%, 0, 0);}
  50% {}
  100% {opacity: 1;-webkit-transform: none;transform: none;}
}
.DIYfadeInRight {-webkit-animation-name: DIYfadeInRight;animation-name: DIYfadeInRight;animation-duration: 3s;animation-fill-mode: both;}