为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 animation-fill-mode

animation-fill-mode

2018.09.03 17:33 971浏览

今天用zepto做一个h5的recruitPage的时候用到了animation-fill-mode,简单记录一下

animation-fill-mode - 指定动画执行前后如何为目标元素应用样式。

允许值:forwards, backwards, both, none

默认值:none

none:回到动画还未开始前的状态

backwards:动画回到第一帧的状态

forwards:动画停留在结束时的状态

both: 根据 animation-direction 轮流应用 forwards 和 backwards 规则。

eg:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
        <style>
            .box{                width: 100px;                height: 100px;                background: red;                animation-delay: 5s;                -webkit-animation:boxan 1s linear both;
               
            }
            @-webkit-keyframes boxan{
                0%{-webkit-transform:translateX(0);background: yellow;}
                50%{-webkit-transform:translateX(40px);}
                100%{-webkit-transform:translateX(100px);background: blue;}
            }        </style>
    <title>animation:both</title></head><body>
    <div class="box"></div></body></html>



作者:张靖bibibi
链接:https://www.jianshu.com/p/234921094167


点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
手记
粉丝
70
获赞与收藏
458

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

51篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

151篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消