今天用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 點贊
評論
評論
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
正在加載中
感謝您的支持，我會繼續努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦