css3中的属性 变形(transform)、过渡(transtion)、动画(animation)

1、transform: 旋转rotate、移动translate、缩放scale、扭曲skew
    transform:rotate(±30deg)  正数：顺时针旋转，负数：逆时针旋转。  旋转
    transform:translate(100px,20px)   translateX translateY   平移
    transform:scale(2,1.5)   scaleX scaleY  缩放
    transform:skew(30deg,10deg)  skewX skewY  扭曲

2、transtion: all 1s ease;
        1、ease：（逐渐变慢）
        2、linear：（匀速）
        3、ease-in：(加速)
        4、ease-out：（减速）
        5、ease-in-out：（加速然后减速）

3.@keyframes规则是创建动画。

.layer1 {
　　/*animation:动画名 动画时长；*/
　　animation:myfirst 3s;

　　}

@keyframes myfirst{
    0%   {background: red; left:0px; top:0px;}
 25% {background: yellow; left:200px; top:0px;}
 50% {background: blue; left:200px; top:200px;}
 75% {background: green; left:0px; top:200px;}
 100% {background: red; left:0px; top:0px;}
 /*from{background:red}
 to{background:yellow}*/
}
@-webkit-keyframes myfirst{ /* Safari and Chrome*/
 0% {background: red; left:0px; top:0px;}
 25% {background: yellow; left:200px; top:0px;}
 50% {background: blue; left:200px; top:200px;}
 75% {background: green; left:0px; top:200px;}
 100% {background: red; left:0px; top:0px;}
 /*from{background:red}
 to{background:yellow}*/
}
@keyframes 规则和所有动画属性 @keyframes 规定动画 animation 所有动画属性的简写属性，除 animation-play-state animation-name @keyframes 动画名称 animation-duration 动画完成一个周期所花秒或毫秒数。默认是 0 animation-timing-function 动画的速度曲线。默认是 "ease" animation-delay 动画延迟多久开始。默认是 0 animation-iteration-count 规定动画被播放的次数。默认是 1 animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal" animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。

div
{
    animation-name: myfirst;
    animation-duration: 3s;
 animation-timing-function: linear;
 animation-delay: 2s;
 animation-iteration-count: infinite;
 animation-direction: alternate;
 animation-play-state: running;
 /* Safari and Chrome: */
 -webkit-animation-name: myfirst;
 -webkit-animation-duration: 5s;
 -webkit-animation-timing-function: linear;
 -webkit-animation-delay: 2s;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-direction: alternate;
 -webkit-animation-play-state: running;
}