公众账号

二维码 微信扫描关注

当前位置:首页 > 技术文章 > 前端开发 >

CSS3 使动画停留在最后一帧

很多时候我们在写动画效果时,都有个这样的需求,希望动画能够停在终点,就是在最后一帧停下,那如何才能实现呢?

CSS3 使动画停留在最后一帧_www.uibq.com

其实很简单,看代码:

CSS代码:

div{
    width:150px;
    height:150px;
    background:#1aa488;
    animation:run 3s;
    position:absolute;
    //使动画停留在最后一帧
    animation-fill-mode:forwards;
}
@keyframes run{
    0%{left:0;}
    100%{left:500px;}
}

animation-fill-mode 的参数,其中 forwards 和 both 都可以让动画停在最后。

    关于 商务 项目 联系 友情链接网站地图 Copyright ©-2018 UiBQ版权所有(http://www.uibq.com)