@-webkit-keyframes widthAni{ 0%{ width:0;}100%{ width:100%;}}
@keyframes widthAni{ 0%{ width:0;}100%{ width:100%;}}
.widthAni{ -webkit-animation-name:widthAni; animation-name:widthAni;}

@-webkit-keyframes heightAni{ 0%{ height:0;}100%{ height:100%;}}
@keyframes heightAni{ 0%{ height:0;}100%{ height:100%;}}
.heightAni{ -webkit-animation-name:heightAni; animation-name:heightAni;}


@-webkit-keyframes opacity { 0%{ opacity:0;} 100%{ opacity:1;}}
@keyframes opacity { 0%{ opacity:0;} 100%{ opacity:1;}}
.opacity{ -webkit-animation-name:opacity; animation-name:opacity;}


@-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)} to{-webkit-transform: rotate(360deg)}}
@-moz-keyframes rotate{from{-moz-transform: rotate(0deg)} to{-moz-transform: rotate(359deg)}}
@keyframes rotate{from{transform: rotate(0deg)} to{transform: rotate(359deg)}}
.rotate{ -webkit-animation-name:rotate; animation-name:rotate;}

@-webkit-keyframes rotateF{from{-webkit-transform: rotate(360deg)} to{-webkit-transform: rotate(0deg)}}
@-moz-keyframes rotateF{from{-moz-transform: rotate(360deg)} to{-moz-transform: rotate(0deg)}}
@keyframes rotateF{from{transform: rotate(360deg)} to{transform: rotate(0deg)}}
.rotateF{ -webkit-animation-name:rotateF; animation-name:rotateF;}



@-webkit-keyframes box2Cir{0%{ -webkit-transform:translate(0,0);} 50%{ -webkit-transform:translate(20%,20%);} 100%{ -webkit-transform:translate(0,0);}}
@-moz-keyframes box2Cir{0%{ -moz-transform:translate(0,0);} 50%{ -moz-transform:translate(20%,20%);} 100%{ -moz-transform:translate(0,0);}}
@keyframes box2Cir{0%{ transform:translate(0,0);} 50%{ transform:translate(20%,20%);} 100%{ transform:translate(0,0);}}
.box2Cir{ -webkit-animation-name:box2Cir; animation-name:box2Cir;}