如何使用css3动画

css3-动画

animation:animation_name animation_duration animation-timing--function animation-delay animation-iteration-count animation-direction;

• animation_name 动画名称，自己命名

• animation_duration 过渡时间

• animation-timing--function 过渡方式

• animation-delay 延迟时间

• animation-iteration-count 播放次数(a)infinite 无限次数。(b)1 默认一次。

• animation-direction 播放方向(a)normal正常播放进度，结束了从头开始。(b)alternate，播放完毕后，有后退的效果，然后再重新播放，更流畅顺滑。 步骤

1. 设置关键帧(0%~100%，可随意选取，这些帧是一定会出现的)

        @keyframes change{
            0%{
                width: 60px;
            }
            20%{
                width: 120px;
            }
            50%{
                width: 180px;
            }
            100%{
                width: 240px;
            }
        }

2. 调用关键帧

    .box:hover{
        animation: change 3s linear 2s infinite alternate;
    }
   

css3-3D

前提需要对父元素设置perspective和transform-style

1. perspective:数值;透视效果，该数值为视距，通俗解释为距离屏幕的距离，近大远小。
2. transform-style:preserve-3d;想让子元素有3D效果，即想让他动起来的时候，和其他元素在同一层面。

transform:translate3d(x,y,z);

当设置z数值的时候，就是在我们设置的视距方向移动

<style>
    body {
        perspective: 400px;
    }
    div {
        width: 200px;
        height: 200px;
        margin: 200px auto;
        background-color: pink;
        transition: all 2s;
    }
    .box:hover{
        transform: translate3d(0,0,200px);
    }
</style>

transform:rotatex(); 正值为元素向屏幕内转动（后仰）；负值为元素向屏幕外转动（鞠躬）。

    .box:hover{
        transform: rotatex(60deg);
    }

transform:rotatey(); 正值为元素向右转；负值为元素向左转。

    .box:hover{
        transform: rotatey(-60deg);
    }

transform:rotatez(); 正值为元素顺时针；负值为元素逆时针。效果与2d的transform:rotate();很相似，但实际意义不同，不可划等号。

    .box:hover{
        transform: rotatez(60deg);
    }