前端 - css3动画怎样对帧的理解?
问题描述
第一种:
@keyframes slow {0% { background-position: -0px -291px;}25% { background-position: -602px -0px;}50% { background-position: -302px -291px;}75% { background-position: -151px -291px;}100% { background-position: -0px -291px;} } /*动画切换的方式是一帧一帧的改变*/-webkit-animation-timing-function: steps(1, start);
第二种:
$spriteWidth: 140px; // 精灵宽度 @keyframes run { 0% { background-position: 0 0; } 100% { background-position: -($spriteWidth * 12) 0; // 12帧 }}#sprite { width: $spriteWidth; height: 144px; background: url('../images/sprite.png') 0 0 no-repeat; animation: run 0.6s steps(12) infinite;}
1,什么叫“一帧一帧的改变”, steps(1, start);该如何理解?2,第二种直接“-($spriteWidth * 12) 0”我就看不懂了,为什么这样写?
问题解答
回答1:1. 什么叫“一帧一帧的改变”, steps(1, start);该如何理解?animation-timing-function 中 steps 的用法参见这篇
steps 详解
2. 第二种直接“-($spriteWidth * 12) 0”我就看不懂了,为什么这样写?首先显然这是 Scss 文件(一种 css 预编译文件)
定义了一个变量:$spriteWidth
-($spriteWidth * 12) 这句就是一个运算呀 => -(140px*12)
回答2:1: steps(1, start)我在MDN上刚好看到一个解释
This keyword represents the timing function steps(1, start). Using this timing function, the animation jumps immediately to the end state and stay in that position until the end of the animation.
就是说你的动画帧一开始就马上跳到结束了,所以你看见的是keyframes里面5个帧一帧一帧地切换。如果没有steps(1, start),就会是一个平滑移动的效果。
2: -($spriteWidth * 12)应该是指把你这个动画分成12帧,每一帧你的背景右移-($spriteWidth * 12)这个长度
相关文章:
1. 在windows下安装docker Toolbox 启动Docker Quickstart Terminal 失败!2. font-family - 我引入CSS3自定义字体没有效果?3. docker start -a dockername 老是卡住,什么情况?4. macos - mac下docker如何设置代理5. dockerfile - [docker build image失败- npm install]6. objective-c - iOS开发支付宝和微信支付完成为什么跳转到了之前开发的一个app?7. PHP中的$this代表当前的类还是方法?8. angular.js - 求一款angular插件9. java - 我用Tomcat访问SQL server数据库时,出现以下错误,该怎么解决?10. docker images显示的镜像过多,狗眼被亮瞎了,怎么办?