@charset "utf-8";
/*
demo JavaKit
author 王松乐
Date 2015-12-23
name 动画脚本
*/
/*---------------------------图片动画----------------------------------*/

/*^o^*/
@keyframes PicOpacity {
	0%   { filter:alpha(opacity=0); -moz-opacity:0; -webkit-opacity: 0; -o-opacity: 0; opacity: 0; }
	100% { filter:alpha(opacity=1); -moz-opacity:1; -webkit-opacity: 1; -o-opacity: 1; opacity: 1; }
}
@-moz-keyframes PicOpacity {
	0%   { filter:alpha(opacity=0); -moz-opacity:0; -webkit-opacity: 0; -o-opacity: 0; opacity: 0; }
	100% { filter:alpha(opacity=1); -moz-opacity:1; -webkit-opacity: 1; -o-opacity: 1; opacity: 1; }
}
@-webkit-keyframes PicOpacity {
	0%   { filter:alpha(opacity=0); -moz-opacity:0; -webkit-opacity: 0; -o-opacity: 0; opacity: 0; }
	100% { filter:alpha(opacity=1); -moz-opacity:1; -webkit-opacity: 1; -o-opacity: 1; opacity: 1; }
}
@-o-keyframes PicOpacity {
	0%   { filter:alpha(opacity=0); -moz-opacity:0; -webkit-opacity: 0; -o-opacity: 0; opacity: 0; }
	100% { filter:alpha(opacity=1); -moz-opacity:1; -webkit-opacity: 1; -o-opacity: 1; opacity: 1; }
}
/*^o^*/
@keyframes PicMove1 {
	0%   { background-position: -128px -128px; }
	100% { background-position: 128px 50px; }
}
@-moz-keyframes PicMove1 {
	0%   { background-position: -128px -128px; }
	100% { background-position: 128px 50px; }
}
@-webkit-keyframes PicMove1 {
	0%   { background-position: -128px -128px; }
	100% { background-position: 128px 50px; }
}
@-o-keyframes PicMove1 {
	0%   { background-position: -128px -128px; }
	100% { background-position: 128px 50px; }
}
/*---------------------------文字动画----------------------------------*/
@keyframes TextColor1 {
	0%   { color: white; }
	100% { color: #7994e8; }
}
@-moz-keyframes TextColor1 {
	0%   { color: white; }
	100% { color: #7994e8; }
}
@-webkit-keyframes TextColor1 {
	0%   { color: white; }
	100% { color: #7994e8; }
}
@-o-keyframes TextColor1 {
	0%   { color: white; }
	100% { color: #7994e8; }
}
/*---------------------------背景动画----------------------------------*/
@keyframes BGcolor1 {
	0%   { background-color: white; }
	100% { background-color: #f5f2f2; }
}
@keyframes BGcolor2 {
	0%   { background-color: #263949; }
	100% { background-color: #415668; }
}
@keyframes BGcolor3 {
	0%   { background-color: #f3f3f3; }
	100% { background-color: #e3e4e9; }
}
/*---------------------------层动画----------------------------------*/
@keyframes DivFlash1 {
	0%   { width: 220px; }
	100% { width: 70px; }
}
@keyframes DivFlash01 {
	0%   { width: 70px; opacity:0 }
	100% { width: 220px; opacity:1 }
}

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

@keyframes DivFlash3 {
	0%   { left: 220px; }
	100% { left: 70px; }
}

@keyframes DivFlash03 {
	0%   { left: 70px; opacity:0 }
	100% { left: 220px; opacity:1 }
}
@keyframes DivFlash4 {
	0%   { height: 0px; filter:alpha(opacity=0); -moz-opacity:0; -webkit-opacity: 0; -o-opacity: 0; opacity: 0; }
	100% { height: 170px; filter:alpha(opacity=1); -moz-opacity:1; -webkit-opacity: 1; -o-opacity: 1; opacity: 1; }
}
@keyframes DivFlash04 {
	0%   { height: 170px; filter:alpha(opacity=1); -moz-opacity:1; -webkit-opacity: 1; -o-opacity: 1; opacity: 1; }
	100% { height: 0px; filter:alpha(opacity=0); -moz-opacity:0; -webkit-opacity: 0; -o-opacity: 0; opacity: 0; }
}
@keyframes DivFlash5 {
	0%   { height: 0px; filter:alpha(opacity=0); -moz-opacity:0; -webkit-opacity: 0; -o-opacity: 0; opacity: 0; }
	100% { height: 118px; filter:alpha(opacity=1); -moz-opacity:1; -webkit-opacity: 1; -o-opacity: 1; opacity: 1; }
}

@keyframes DivFlash6 {
	0%   { right: 0px; opacity:0 }
	100% { right: 150px; opacity:1 }
}
@keyframes DivFlash06 {
	0%   { right: 150px; }
	100% { right: 0px; }
}

/*^)^*/
@-webkit-keyframes DivFlash7 {from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}
@-moz-keyframes DivFlash7 {from{-moz-transform:rotate(0deg)}to{-moz-transform:rotate(359deg)}}
@-o-keyframes DivFlash7 {from{-o-transform:rotate(0deg)}to{-o-transform:rotate(359deg)}}
@keyframes DivFlash7 {from{transform:rotate(0deg)}to{transform:rotate(359deg)}}

/*^)^*/
@-webkit-keyframes DivFlash8 {0%,30%{opacity:0;-webkit-transform:translate(0,10px)}60%{opacity:1;-webkit-transform:translate(0,0)}100%{opacity:0;-webkit-transform:translate(0,-8px)}}
@-moz-keyframes DivFlash8 {0%,30%{opacity:0;-moz-transform:translate(0,10px)}60%{opacity:1;-moz-transform:translate(0,0)}100%{opacity:0;-moz-transform:translate(0,-8px)}}
@keyframes DivFlash8 {0%,30%{opacity:0;transform:translate(0,10px)}60%{opacity:1;transform:translate(0,0)}100%{opacity:0;transform:translate(0,-8px)}}

/*^)^*/
@-webkit-keyframes DivFlash9 {0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
@keyframes DivFlash9 {0%{opacity:0;-webkit-transform:translate3d(0,100%,0);-ms-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}