一、学习内容

1.CSS3动画

1.1 @keyframes创建动画规则

例如：
    @keyframes boxMove{
            0%{
                transform: translate(0,0);
            }

            50%{
                transform: translate(500px,0) scale(1.5);
            }

            100%{
                transform: translate(500px,500px) scale(0.5);
            }
   }

1.2 animation-name属性

animation-name 属性值为需要调用的@keyframes关键帧名，该属性为必要属性
例如：
    animation-name: boxMove;

1.3 animation-duration属性

与过渡类似，animation-duration 属性值为动画完成一个周期所需要的时间，该属性为必要属性
例如：
    animation-duration: 3s;

1.4 animation-timing-function属性

与过渡类似，animation-timing-function 属性值为速度曲线
    ease 先慢，再快，再慢 （默认值）
    linear匀速
    ease-in：由慢到快。
    ease-out：由快到慢。
    ease-in-out：由慢到快再到慢。
    step-start跳到鼠标开始那帧
    step-end跳到鼠标结束那帧
该属性值同样可以设置 cubic-bezier(0.25, 0.1, 0.41, 0.6)

1.5 animation-delay属性

与过渡类似，animation-delay 属性值为延迟时间，该属性值可以为负值
例如：
    animation-delay: 2s;

1.6 animation-iteration-count属性

animation-iteration-count 属性规定了动画的次数，默认为1，设置infinite为无限循环
例如：
    animation-iteration-count： infinite;

1.7 animation-direction属性

animation-direction 属性规定了动画是否在下一周期逆向播放，默认为normal，不逆向
注意：要使该属性生效，播放次数属性animation-iteration-count必须至少为2

例如：
    animation-direction： alternate； 反向播放

1.8 animation-play-state属性

animation-play-state 属性规定了动画是否正在运行或暂停，默认是running,可以设置pause暂停
例如：
    animation-play-state: pause;

1.9 animation-fill-mode属性

animation-fill-mode 属性规定了动画在最后一帧的状态是否保留，默认为none,可以设置forwards保留
例如：
    animation-fill-mode: forwards;

1.10 animation复合写法

语法：
    animation: name duration [timing-function] [delay] [iteration-count] [direction] [play-state] [fill-mode];

2.CSS3D转换

2.1 3D移动

方法：
    translate3d(x,y,z) 使元素在这三个纬度中移动,也可以分开写
例如：
    translateX(length),translateY(length), translateZ(length)
示例：
    div:hover{
        /*Y轴移动+100px*/
        transform: translateY(100px);
        /*x轴移动+100px*/
        transform: translateX(100px);
        /*x轴,Y轴同时移动+100px*/
        transform: translate3d(100px,100px,0px);
    }

2.2 3D缩放

scale3d(number,number,number) 使元素在这三个纬度中缩放，也可分开写
如：scaleX(),scaleY(),scaleZ()

示例：
     div:hover{
        /*X轴放大为2*/
        transform: scaleX(2);
        /*Y轴缩小为0.5*/
        transform: scaleY(0.5);
        /*x轴,Y轴同时进行缩放*/
        transform: scale3d(2,0.5,1);
    }

2.3 3D旋转

rotate3d(x,y,z,angle)：指定需要进行旋转的坐标轴
rotateX(angle) 是元素依照x轴旋转；
rotateY(angle) 是元素依照y轴旋转；
rotateZ(angle) 是元素依照z轴旋转；

示例：
    div:hover{
        /*Y轴方向旋转45度*/
        transform: rotateY(45deg);
        /*X轴方向旋转90度*/
        transform: rotateX(90deg);
        /*x轴和Y轴方向同时进行旋转*/
        transform: rotate3d(1,1,0,45deg);
    }

2.4 perspective属性

perspective(length) 为一个元素设置三维透视的距离。仅作用于元素的后代，而不是其元素本身。
perspective 属性指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果

例如：
    perspective: 1000px;

2.5 transform-style属性

transform-style：使被转换的子元素保留其 3D 转换(需要设置在父元素中)
属性值：
    flat: 子元素将不保留其 3D 位置-平面方式。
    preserve-3d: 子元素将保留其 3D 位置—立体方式。

3. box-shadow

语法：
    box-shadow: h-shadow v-shadow [blur] [spread] [color] [inset];

h-shadow: 水平阴影的位置，允许负值。必须属性值
v-shadow: 垂直阴影的位置，允许负值。必须属性值
blur: 模糊距离。可选
spread: 阴影的尺寸。可选
color: 阴影的颜色。可选
inset: 将默认的外部阴影(outset)改为内部阴影。可选