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);
}