css动画animation属性

@keyframes move {

    0% {

        width: 100px;

    }

    100% {

        width: 200px

    }

}

div {

    /* 调用动画  起的类名*/

    animation-name: move;

    /* 持续时间 */

    animation-duration: 1s；

}

属性

描述

div {

    width: 100px;

    height: 100px;

    background-color: aquamarine;

    /* 动画名称 */

    animation-name: move;

    /* 动画花费时长 */

    animation-duration: 2s;

    /* 动画速度曲线 */

    animation-timing-function: ease-in-out;

    /* 动画等待多长时间执行 */

    animation-delay: 2s;

    /* 规定动画播放次数 infinite: 无限循环 */

    animation-iteration-count: infinite;

    /* 是否逆行播放 */

    animation-direction: alternate;

    /* 动画结束之后的状态 */

    animation-fill-mode: forwards;

}

div:hover {

    /* 规定动画是否暂停或者播放 */

    animation-play-state: paused;

}