css动画表达方式

transform：

rotateX(30deg) 绕着x旋转30deg
rotateY(30deg) 绕着y旋转30deg
rotateZ(30deg) 绕着z旋转30deg
translateX(30px) 沿着x轴移动30px
translatey(30px) 沿着y轴移动30px
translatez(30px) 沿着Z轴移动30px( 必须给父盒子加透视)

anmition：

 @keyframes 动画名{
    0%{
     }

    100%{

    }

    或者
    from{}
    to{}
}

动画调用：
    animation: 动画名称 动画时间  执行次数  运动曲线 延迟执行 结束后状态 是否反向；
        infinite: 无限次
        alternate: 反向执行
        forwards: 保持结束后的状态
        backwards: 保持动起开始前的状态
        steps(5): 让动画分步执行；

        动画详细属性：
            animation-name:动画名称
            animation-duration:持续时间
            animation-iteration-count:执行次数
            animation-timing-function:运动曲线
            animation-fill-mode:结束状态
            animation-direction: 动画方向
            animation-delay: 延迟时间

这篇好文章是转载于：学新通技术网