css3另一个属性写法

Posted 2020-10-23 青年总裁

使用@keyframes name{}属性来实现自动的移动效果如下，可以使用infinite来实现无限循环播放。也可以规定循环次数，只需把infinite更换为想要播放的次数即可：

还可以通过animation-direction（反向）属性来反过来。

.seser{
    width:200px;
    height:200px;
    background:#F00;
    /*给元素指定一个运动*/
    animation:run 2s infinite;
}

/*规定运动规则*/
@keyframes run{
    0%{
        width:200px;
    }

    50%{
        width:600px;
    }
    100%{
        width:200px;
    }
}