今天用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
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦