CSS实现简单动画

1.css2D转换

(1)translate()  设置元素的移动；

①transform:translate(100px,200px);    

②transform:translateX(100px);

   transform:translateY(200px);

表示把元素沿x轴移动100px，沿y轴移动200px；

（单位为像素px；）

（2）rotate()  设置元素的旋转；

transform:rotate(90deg); 

(可以设置旋转的中心点 transform:rotateX(deg);transform:rotateY(deg);)

表示把元素（沿x轴/y轴）旋转90度；

（单位为deg<度>；顺时针旋转为正值，逆时针旋转为负值；）

（3）scale()  设置元素的缩放倍数；

transform:scale(3,2);  表示把元素的宽度放大为原来的3倍，长度放大为原来的2倍；

（没有单位；若只有一个数值，则认为将宽度与长度等比例放大与缩小；）

（4）transform的综合写法：

transform:translate() rotate() scale();

(各属性之间用空格隔开，一般位移要写在最前面；）

2.css3动画

（1）先定义动画

@keyframes 动画名字 {
    0% {
       /*属性*/
    }
    ...
    100% {
        /*属性*/
    }
}

（2）设定animation

在需要动画的盒子的父盒子里设置animation；

（其中属性要按照顺序写 

animation:name duration timing-function delay iteration-count direction fill-mode;

各属性之间要用空格隔开；）

3.css3 3D转换

（1）转换法则：利用transform；

（写属性时，与之前的区别，注意在属性后加上3d，d是小写

tranform:translate3d(x,y,z) rotate3d(deg);

(2)prespective属性：设置透视效果（近大远小）

prespective: 视距；

（单位px；）

（3）给父盒子加上3D效果

transform-style: preserve-3d;