css3 动画总结

在用css3创建动画效果之前，首先要先了解下@keyframes 规则

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}

@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}

类似这个，from,to相当于0%和100%，也就是起始跟结束时的状态
myfirst就是你定义的动画效果名称，可以把它捆绑到任意一个选择器里。
当你需要在某个选择器使用这个动画效果的时候，就需要用animation，他可以捆绑写好的动画效果

div
{
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}

这里直接复制的w3school的例子，应该很容易看懂
animation有很多个属性，可以根据自己要求去查找，包括规定时长，速度，循环次数之类的
另外，还有一个标签，transform
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
一般晃动旋转之类的特效做起来看起来比较炫酷
举几个例子，比如做一个地球转动的效果，结合animation的动画效果和transform的rotate就很好实现

@-webkit-keyframes rotation{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
.Rotation{
animation: rotation 3s linear infinite;
-moz-animation: rotation 3s linear infinite;
-webkit-animation: rotation 3s linear infinite;
-o-animation: rotation 3s linear infinite;
}

还有左右晃动效果

 @-webkit-keyframes shakelr
{
    0% { 
      -webkit-transform: rotate(15deg);
      transform: rotate(15deg);
    }
    33% {  
      -webkit-transform: rotate(-15deg);
      transform: rotate(-15deg);
    }
    66% {  
      -webkit-transform: rotate(15deg);
      transform: rotate(15deg);
    }
    100% {  
      -webkit-transform: rotate(-15deg);
      transform: rotate(-15deg);
    }
} 
.shakelr {
transform-origin: center;
-webkit-transform-origin: center;
animation: shakelr 1s infinite alternate ease-in-out;
-webkit-animation: shakelr 1s infinite alternate ease-in-out;
}

上下晃动效果

@keyframes shaketb {
    0%,100%,20%,50%,80% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
    40% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px)
    }
    60% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px)
    }
}
.shaketb {
animation: shaketb 1.5s infinite alternate ease-in-out;
-webkit-animation: shaketb 1.5s infinite alternate ease-in-out;
}

这只是最简单的效果，如果还要做的更炫可能还要配合其他的属性之类的