/* css3过渡样式区 */
/*2D*/
.hover_shadow:hover{box-shadow:0px 0px 15px 10px #ddd;}
.tf_xy_2d:hover{
	  transform:translate(200px,200px);/*translate（x轴，y轴）移动样式属性*/
	  -webkit-transform:translate(200px,200px);/*苹果Safari浏览器，chrome浏览器*/
	  -ms-transform:translate(200px,200px);/*ie浏览器*/
	  -o-transform:translate(200px,200px);/*opera浏览器*/
	  -moz-transform:translate(200px,200px);/*火狐浏览器*/
  }
.tf_rotate_2d{
	  transform:rotate(90deg);/*rotate（旋转角度deg）旋转属性*/
	  -webkit-transform:rotate(90deg);
	  -ms-transform:rotate(90deg);
	  -o-transform:rotate(90deg);
	  -moz-transform:rotate(90deg);
	  }
.tf_scale_2d:hover{
	  transform:scale(1.2,1.2);/*倍数缩放，第一个参数是宽，第二个参数是高*/
	  -webkit-transform:scale(1.2,1.2);
	  -ms-transform:scale(1.2,1.2);
	  -o-transform:scale(1.2,1.2);
	  -moz-transform:scale(1.2,1.2);
	}
.tf_skew_2d:hover{
	  transform:skew(20deg,20deg)/*倾斜角度(斜切扭曲)，第一个为x轴角度，第二个为y轴角度;此属性也可以单独定义skewX和skewY*/
	  -webkit-transform:skew(20deg,20deg);
	  -ms-transform:skew(20deg,20deg);
	  -o-transform:skew(20deg,20deg);
	  -moz-transform:skew(20deg,20deg);
	}
	  
/*3D*/
.tf_rotate_3d:hover .curr{
	transform:rotateY(180deg);/*3D旋转*/
	-webkit-transform:rotateY(180deg);
    -ms-transform:rotateY(180deg);
	-o-transform:rotateY(180deg);
	-moz-transform:rotateY(180deg);
	}
/*过度动画*/	  
.ts_animate_all{
	 /*总写*/
	/*transition{需要过渡的属性 过渡持续时间 动画类型 延迟过渡的时间}同时写多个用","隔开；*/
	transition:all 0.3s linear;
	-moz-transition:all 0.3s linear;
	-o-transition:all 0.3s linear;
	-ms-transition:all 0.3s linear;
	-webkit-transition:all 0.3s linear;
	/*分写*/
	/*transition-property/*过度名称*/
	/*transition-duration/*过度效果花费的时间*/
	/*transition-timing-function/*过渡效果的时间曲线linear:线性过渡,ease:平滑过渡,ease-in:由慢到快,ease-out:由快到慢,ease-in-out:由慢到快再到慢;cubic-bezier(<number>, <number>, <number>, <number>)： 特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内 */
	/*transition-delay/*过渡效果开始时间*/
}

/*自定义动画*/
.fish_animate{
	animation:my_anim 18s linear infinite;/*动画名称 持续时间 过渡方式 延迟时间 循环次数 是否反向*/
	-moz-animation:my_anim 18s linear infinite;/*动画的执行时间,infinite（无限循环） normal（正常方向）/alternate（往复执行）无限循环往复执行*/
	-o-animation:my_anim 18s linear infinite;
	-ms-animation:my_anim 18s linear infinite;
	-webkit-animation:my_anim 18s linear infinite;
	}
@keyframes my_anim{
	0%{left:-60px;top:50px;}
	25%{top:100px;}
	75%{top:50px;}
	100%{left:1920px;top:100px;}
	}
@-webkit-keyframes my_anim{
	0%{left:-60px;top:50px;}
	25%{top:100px;}
	75%{top:50px;}
	100%{left:1920px;top:100px;}
	}
@-o-keyframes my_anim{
	0%{left:-60px;top:50px;}
	25%{top:100px;}
	75%{top:50px;}
	100%{left:1920px;top:100px;}
	}
@-moz-keyframes my_anim{
	0%{left:-60px;top:50px;}
	25%{top:100px;}
	75%{top:50px;}
	100%{left:1920px;top:100px;}
	}
@-ms-keyframes my_anim{
	0%{left:-60px;top:50px;}
	25%{top:100px;}
	75%{top:50px;}
	100%{left:1920px;top:100px;}
	}
.fish2_animate{
	animation:my_anim2 15s linear infinite;/*动画名称 持续时间 过渡方式 延迟时间 循环次数 是否反向*/
	-moz-animation:my_anim2 15s linear infinite;/*动画的执行时间,infinite（无限循环） normal（正常方向）/alternate（往复执行）无限循环往复执行*/
	-o-animation:my_anim2 15s linear infinite;
	-ms-animation:my_anim2 15s linear infinite;
	-webkit-animation:my_anim2 15s linear infinite;
	}
@keyframes my_anim2{
	0%{left:-260px;top:150px;}
	20%{top:70px;}
	40%{top:150px;}
	60%{top:70px;}
	80%{top:150px;}
	100%{left:1920px;top:70px;}
	}
@-webkit-keyframes my_anim2{
	0%{left:-260px;top:150px;}
	20%{top:70px;}
	40%{top:150px;}
	60%{top:70px;}
	80%{top:150px;}
	100%{left:1920px;top:70px;}
	}
@-o-keyframes my_anim2{
	0%{left:-260px;top:150px;}
	20%{top:70px;}
	40%{top:150px;}
	60%{top:70px;}
	80%{top:150px;}
	100%{left:1920px;top:70px;}
	}
@-moz-keyframes my_anim2{
	0%{left:-260px;top:150px;}
	20%{top:70px;}
	40%{top:150px;}
	60%{top:70px;}
	80%{top:150px;}
	100%{left:1920px;top:70px;}
	}
@-ms-keyframes my_anim2{
	0%{left:-260px;top:150px;}
	20%{top:70px;}
	40%{top:150px;}
	60%{top:70px;}
	80%{top:150px;}
	100%{left:1920px;top:70px;}
	}
.fish3_animate{
	animation:my_anim3 3s linear infinite;/*动画名称 持续时间 过渡方式 延迟时间 循环次数 是否反向*/
	-moz-animation:my_anim3 3s linear infinite;/*动画的执行时间,infinite（无限循环） normal（正常方向）/alternate（往复执行）无限循环往复执行*/
	-o-animation:my_anim3 3s linear infinite;
	-ms-animation:my_anim3 3s linear infinite;
	-webkit-animation:my_anim3 3s linear infinite;
	}
@keyframes my_anim3{
	0%{transform:rotate(0deg)}
	50%{transform:rotate(15deg)}
	100%{transform:rotate(0deg)}
	}
@-webkit-keyframes my_anim3{
	0%{transform:rotate(0deg)}
	50%{transform:rotate(15deg)}
	100%{transform:rotate(0deg)}
	}
@-o-keyframes my_anim3{
	0%{transform:rotate(0deg)}
	50%{transform:rotate(15deg)}
	100%{transform:rotate(0deg)}
	}
@-moz-keyframes my_anim3{
	0%{transform:rotate(0deg)}
	50%{transform:rotate(15deg)}
	100%{transform:rotate(0deg)}
	}
@-ms-keyframes my_anim3{
	0%{transform:rotate(0deg)}
	50%{transform:rotate(15deg)}
	100%{transform:rotate(0deg)}
	}