CSS动画

CSS动画： 对元素进行移动、缩放、转动、拉长或拉伸——>改变元素的形状、尺寸和位置

2D转换方法

/*
2D转换方法:
        translate(x,y)      x,y坐标的偏移量
        rotate(旋转度数)
        scale(宽度，高度)     缩放
        skew(x轴倾斜度数，y轴倾斜度数)         倾斜
        matrix()            矩阵效果
*/
.div2{
    width: 100px;
    height: 20px;
    background-color:light blue;

    /*坐标偏移量X轴Y轴*/
    transform: translate(100px,100px);
    -webkit-transform:translate(100px,100px); /* safari chrome*/
    -ms-transform: translate(100px,100px);/*IE*/
    -o-transform: translate(100px,100px);/*opera*/
    -moz-transform: translate(100px,100px);/*Firefox*/

    /*transform:rotate(180deg);*/
    -webkit-transform: translate(100px,100px) rotate(180deg);
    /*transform:scale(1,2);*/
    -webkit-transform: translate(100px,100px) rotate(180deg) scale(1,2);
}

3D转换方法

3D转换方法：
        rotateX()
        rotateY()
.div3{
    width: 100px;
    height: 100px;
    background-color:light blue;

    /*transform:rotateX(120deg);*/
    -webkit-transform: rotateX(120deg);}

过渡

/*
过渡：
        transition:                     设置4个过渡属性
        EXP:    -webkit-transition:width 2s,height 2s, transform 2s; 
        transition-property:            过渡的名称
        transition-duration:            过渡效果话费的时间
        transition-timing-function:     过渡效果的时间曲线
        transition-delay:               过渡效果延时多长时间开始执行
*/
.div6{
    width: 100px;
    height: 100px;
    background-color: #d43f3a;
    -webkit-transition: width 2s,height 2s,-webkit-transform 2s;
    transition: width 2s,height 2s,transform 2s;
}
.div6:hover{
    width: 200px;
    height: 200px;

    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);

    -webkit-transition-delay: 2s;
    -moz-transition-delay: 2s;
    -ms-transition-delay: 2s;
    -o-transition-delay: 2s;
    transition-delay: 2s;
}

动画######

/*
    动画：
        css3的动画需要遵守@keyframes规则
            规定动画的时长
            规定动画的名称
*/
.div4{
    width:20px;
    height:20px;
    background-color:red;
    position:relative;/*相对布局*/
    margin: 0px auto;/*上下  左右*/
                        /*  重复执行  */
    animation:anim 5s infinite alternate;
    -webkit-animation:anim 5s infinite alternate;
}
@keyframes anim{
    0%{ background-color:red;    left:0px;     top:0px;   }
    25%{ background-color:green; left:200px;  top:0px;    }
    50%{ background-color:blue;  left:200px;  top:200px;  }
    75%{ background-color:black; left:0px;    top:200px;  }
    100%{background-color:gray;  left:0px;    top:0px;    }
}
@-webkit-keyframes anim{
    0%{  background-color:red;   left:0px;     top:0px;    }
    25%{ background-color:green; left:200px;   top:0px;    }
    50%{ background-color:blue;  left:200px;   top:200px;  }
    75%{ background-color:black; left:0px;     top:200px;  }
    100%{background-color:gray;  left:0px;     top:0px;    }
}