过度：transition:all 1s;  

2D变形transform是css3中很有代表性的特征之一，可以实现如下动画：   动画效果都是配合过度transition一起使用的

1·移动 translate(x,y);   translateX(x)仅仅水平移动  translateY(y)仅垂直方向移动 案例不定宽高垂直居中

2·缩放 scale(x,y);        也可以scaleX(),scaleY()括号中写入倍数

3·旋转 rotate(deg);       正值是顺时针，负值是逆时针   rotateX()围绕x轴旋转，rotateY()围绕y轴旋转3D动画

4 transform-origin  原点的位置，缩放旋转的原点

5 倾斜：skew(deg,deg)

3D变形

rotaleX(),rotateY(),rotateZ()

透视：perspective：视距表示视点距离屏幕的距离，一般作为属性设置给父元素，作用域所有3D转化的子元素

 动画animation

在需要动画的元素中使用animation，然后再@keyframes,如下： 综合写法 animation: name duration timing-function delay iteration-count direction fill-mode;

div{

    animation: 名字 3s infinite;

}

keyframes 名字{

    0%{}

    50%{}

    100%{}

}

1.animation-name：;           你用@keyframe设置的动画的名字

2.anmation-duration：3s；      动画耗时

3.animation timing-function ：运动速度

         默认属性ease（低速开始，加快，低速结束） linear（匀速运动） ease-in（低速开始）

          ease-out（低速 结束 ）ease-in-out 低速开始和结束    steps（n）动画分成n步来完成   

4.animation-delay ：2s； 延迟时间   

5.animation-interation-count：2/infinite（无限次）  动画响应的次数（interation英文意思相互影响）

6.animation-direction:     循环方向   

            默认normal(默认0~100) / alternate(0~100~0)/ reverse(100~0)/

            alternate-reverse(100~0~100)

7.animation-fill-mode      动画等待或者结束时候的状态     

        forwards 初始状态不能立即执行0%的状态，执行动画完成后保留最后状态

        backwards 如在0%时候设置样式，立即执行。动画完成后不会保留最后的结果（有延迟）

        both  既能立即执行设置的样式，也会保留最后的结果。

8.animation-play-state   （不在简写内） 播放和暂停状态    paused暂停     running 播放