css3动画

转换：transform

　　1.transform: translate(50px,100px);，偏移位置，将元素偏移到x轴50px，y轴100px的位置，元素在页面位置不动

　　2.transform: rotate(30deg);旋转，将元素旋转30度，如果是负数就逆时针旋转，元素在页面位置不动

　　3.transform: scale(2,3)；缩放，将元素宽放大2倍，高放大3倍，元素在页面位置不动

　　4.transform: skew(30deg,20deg);在平面上倾斜，x轴上倾斜30度，y轴上倾斜20度，元素在页面位置不动

　　5.transform:matrix(0.866,0.5,-0.5,0.866,0,0);将上面四个方法缩写成一个，旋转、缩放、移动（平移）、倾斜功能

　　6.transform: rotateX(120deg);围绕其在一个给定度数X轴旋转的元素

　　7.transform: rotateY(130deg);围绕其在一个给定度数Y轴旋转的元素

过度：transition

　　过度就是在元素动作时给他时间引导一下

div
{
    transition: width 2s;
}
div:hover
{
    width:300px;
}

鼠标移到div时宽会在两秒内变为300px；

div
{
    transition: width 2s, height 2s, transform 2s;
}

也可以加上转换效果，实现宽2秒高两秒转换两秒内转变

动画：animation

选择一个样式，里面是动画的内容,从背景红色，过渡到背景黄色

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

当鼠标移动到div时，动画在五秒钟对div进行改变

div:hover
{
    animation: myfirst 5s;
}

使用动画，为了达到浏览器最佳效果，一般都将from和to设置为0%和100%

myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}