CSS动画

首先，定义动画

两种方式：1、from{};   to{}

                  2、百分比

@keyframes aniName1{
    from{
        left:0px;
    }
    to{
        left:500px;
    }
}

/*百分比操作更灵活*/
@keyframes aniName2{
   0%{
    left: 50px;
    top: ....
    }
   50%{
    left: 50px;
    }
   70%{
    left: 50px;
    }
   100%{
    left: 50px;
    }
}

3D旋转的动画

@keyframes rrotate{
    from{}
    to{
        transform: rotate3d(1,1,1,360deg); //x y z轴都360度旋转
    }
}

接着，调用动画

动画名 执行时间 运行轨迹【匀速linear 加速ease-in 减速ease-out 先加后减ease-in-out】 最终状态【无限播放infinite 保持最终状态不变forwards】

【2D】

.box{
    animation: aniName 5s linear infinite;
}

【3D】需要增加下面一行，更改转换方式，2D->3D

.box{
    transform-style: preserve-3d;
    animation: aniName 5s linear infinite;
}

box-shadow盒子阴影 创造立体效果 层次感

box-shadow: 0px 0px 5px #000000
右偏移量 下偏移量 模糊范围 颜色

额外，缓动动画

效果更加

transition: all 5s;

在此对象添加伪元素如hover 

+ transform: 

transform含 rotate旋转  translate平移 skew偏移  scale缩放 【2D转换，可单独使用】

transition过渡 

transform变形

animation动画

缓动延时和动画延时

transition-delay:4s;
animation-delay:2s;