CSS动画归类

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*2d    2d-3d   animation   过渡*/
        transform:
        translate   rotate  scale  skew
        transform:rotatex(0deg) translate() scale();
        旋转的时候会导致坐标轴变化
        transform-origin:设置元素的旋转中心


        过渡  让2d动画和元素的属性在时间段之内进行变化  ：transform 1s 2s ease-in;


        帧动画   定义动画播放器
        animation:name 1s 3s linear infinite alternate;
        animation-fill-model:forwards;
        @keyframes name {
            from{
                元素的属性  start
            }
            to{
                元素的属性  stop
            }

            0%{}
            100%{}
        }
        .b{
        }

        2d-3d动画
        transform-style:preserve-3d;
        animation:
        transform:rotate()

        css3 里面动画使用的伪类： :after :before   类似:hover

        .b:after{
            content: "";
        }
        .b:before{
            content: "";
        }

    </style>
</head>
<body>

</body>
</html>
猜你喜欢
