关于css动画（面试准备）

filter:blur(5px);        图片模糊，f滤镜

width: calc(100% - 30px);	动态计算长度值

transition:width .5s ease 1s,height .5s ease 1;        过渡属性 花费时间 运动曲线 开始时间
transition: all 2s;        同时过渡

transform: translate(400px,400px);        平移X和Y轴

transform:rotate(-3600deg);        旋转
transform-origin:-50px -50px;        改旋转中点，本体改

transform:scale(-1,-1);        缩放 远离0放大，靠近0缩小

perspective:800px;        视距，给body，近大远小
transform:translateZ(500px);        Z轴平移，正向屏幕走500px，要和视距搭配使用，比如现在是300px;

动画
        /* 声明动画 及名称 */
        @keyframes moving{
            from{
                transform: translateX(0);
            }
            to{
                transform: translateX(1500px);
            }
        }
    img{
        display: block;
        width: 250px;
        /* 调用动画 */
        animation: moving 1s  0.2s infinite alternate ;
        /* 动画：名称 时间 运动曲线 延迟时间 播放次数 是否反向 */
        animation-fill-mode: forwards;
        /*保持到结束的位置*/
    }
     img:hover{
            animation-play-state: paused;
            /* 当鼠标放在上面时停止动画，鼠标离开继续动画 */
        }
    
    </style>

百分比动画
    @keyframes godcar {
        0% {
            transform: translateX(0);
        }
        49% {
            transform: translateX(1500px);
        }
        50% {
            transform: translateX(1500px) rotateY(180deg);
        }
        99% {
            transform: translateX(0px) rotateY(180deg);
        }
        100% {
            transform: translateX(0px) rotateY(0deg);
        }
    }
    img{
        display: block;
        width: 150px;
        animation: godcar 2s .5s infinite;
    }