CSS3动画【归纳总结】

<!---网易的动画如下--->

<style>
.dhb66{ width:300px; height:300px; border:1px solid #f00;}
.dhb66:hover{
box-shadow: 3px 3px 6px rgba(0,0,0,0.2);
-webkit-transform: translate(-2px,-2px);
-moz-transform: translate(-2px,-2px);
-ms-transform: translate(-2px,-2px);
-o-transform: translate(-2px,-2px);
transform: translate(-2px,-2px);
transition: all ease-in-out .1s;
}
</style>

<!--------- 的动画如下：---------------------------->

transition: transform .2s ease-in;

<!---------淘宝小三角的动画如下：---------------------------->

<b></b>

b {
-webkit-backface-visibility: hidden;
display:inline-block;
vertical-align:middle;
width: 0;
height: 0;
border-width: 30px;
border-style: solid dashed dashed;
border-color: #000 transparent transparent;
font-size: 0;
line-height: 0;
color:#999;
}
b:hover{
-webkit-backface-visibility: hidden;
border-color: #bbb transparent transparent;
-webkit-transition: -webkit-transform .2s ease-in;
-moz-transition: -moz-transform .2s ease-in;
-o-transition: -o-transform .2s ease-in;
transition: transform .2s ease-in;
-moz-transform: rotate(180deg);
-moz-transform-origin: 50% 30%;
-webkit-transform: rotate(180deg);
-webkit-transform-origin: 50% 30%;
-o-transform: rotate(180deg);
-o-transform-origin: 50% 30%;
transform: rotate(180deg);
transform-origin: 50% 30%
}

<!--------猪八戒的图片效果如下：--------------->

a img { -webkit-transition: margin-left 0.5s ease; -o-transition: margin-left 0.5s ease; transition: margin-left 0.5s ease; }
a:hover img { margin-left: -10px; }

<!----------------------->

<div class="canvas">
<div class="inner">
<div class="front">
<p>游戏统计分析</p>
<div><img src="/images/bgs/home/game.png" alt="#"></div>
<div class="shadow2"><img src="/images/bgs/home/point1.png" alt=""></div>
</div>
<div class="cricle-panel back">
<div class="logo"><img src="/images/bgs/home/game-hover.png" alt=""></div>
<h4>游戏统计分析</h4>
<p>全方位支持不同阶段的游戏运营需求</p>
<div class="shadow12"><img src="/images/bgs/home/point1.png" alt=""></div>
</div>
</div>
</div>
/*canvas transform*/
.canvas {
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-o-backface-visibility:hidden;
}
.canvas .inner{
background:transparent;
}
.canvas .inner, .canvas .front, .canvas .back{
position:absolute;
left:0;
top:0;
display:block;
width:160px;
height:160px;
}
.canvas .inner, .canvas .inner {
-webkit-perspective:200px;
-moz-perspective:160px;
-ms-perspective:160px;
perspective:160px;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
transform-style:preserve-3d;
-webkit-transition:all 500ms cubic-bezier(0.175,0.885,0.320,1.275) 0;
-moz-transition:all 300ms;
-o-transition:all 500ms cubic-bezier(0.175,0.885,0.320,1.275) 0;
-ms-transition:all 500ms cubic-bezier(0.175,0.885,0.320,1.275) 0;
transition:all 500ms cubic-bezier(0.175,0.885,0.320,1.275) 0;
}
.canvas .front, .canvas .back{
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-o-backface-visibility:hidden;
}
.canvas .back{
display:none\9;
display:none\0;
-webkit-transform:rotateY(-180deg);
-moz-transform:rotateY(-180deg);
-ms-transform:rotateY(-180deg);
-o-transform:rotateY(-180deg);
transform:rotateY(-180deg);
}
.canvas .front{ z-index:8; }
.canvas.hover .front{ z-index:-1;display:none\9;display:none\0; }
.canvas.hover .front p{
visibility:hidden;
}
.canvas.hover .inner{
-webkit-transform:rotateY(-180deg);
-moz-transform:rotateY(-180deg);
-ms-transform:rotateY(-180deg);
-o-transform:rotateY(-180deg);
transform:rotateY(-180deg);
}
.canvas.hover .back{
display:block\9;
display:block\0;
}
.canvas.hover .back p{
-webkit-transform: translate3d(0px,0px,0px);
-moz-transform: translate3d(0px,0px,0px);
-ms-transform: translate3d(0px,0px,0px);
-o-transform: translate3d(0px,0px,0px);
transform: translate3d(0px,0px,0px);
}