step 中设置 end 或 start 会造成什么差异吗？
来源：3-3 自适应雪碧图
TWT
2016-05-17 19:45
.birdFly {
-webkit-animation:bird-slow 400ms steps(3,start) infinite;
}
@-webkit-keyframes bird-slow{
0%{
background-position: 0% 0%;
}
100%{
background-position: -300% 0%;
}
}step 中设置成 end 和 设置成 start 貌似没有什么区别，是因为循环播放的关系吗？
写回答
关注
1回答
-
- CHIKE1978
- 2016-05-19 15:21:32
我的理解是
end时
第一步background-position-x 是0%~-100% 执行
第二步background-position-x 是-100%~-200% 执行
第三步background-position-x 是-200%~-300% 不执行
start时
第一步background-position-x 是0%~-100% 不执行
第二步background-position-x 是-100%~-200% 执行
第三步background-position-x 是-200%~-300% 执行
动画方向顺序不同
H5+JS+CSS3 实现圣诞情缘
为圣诞节准备的H5+JS+CSS特效案例教程，实现静与动的结合
122015 学习 · 211 问题
相似问题