【前言】
本文总结下利用CSS steps 实现逐帧动画。
网页中的逐帧动画,大致可分为两大类的实现方式, 分别是使用JS控制,和单纯使用CSS实现,两者的优劣总体概括来说就是: JS动画可控性更强,但开销大,实现复杂。 CSS动画实现相对JS更简单。
PS:江湖传言CSS动画性能更佳,可web环境过于复杂,哪个性能好可能需要参照具体情况测试。常见的网页动画形式参考:9种网页动画常用实现方式总结
另外在JS控制的动画中,又可分为JS控制的canvas动画, SVG动画,以及直接控制图片,元素的位置来实现的动画。一句话,JS动画更复杂。
【主体】
通过CSS直接实现动画效果 标准化、资源占用少。
缺点:旧IE不支持,现代浏览器支持情况有所差异,交互功能弱。所以仅适用于现代浏览器
【CSS实现逐帧动画的原理】
css逐帧动画是通过不断变换keyframes中每个阶段的背景来实现。
比如0%处和100%处分别使用不同的background就实现了最简单的画面切换。
一般的做法是先将动画的不同帧做成一张雪碧图,然后不断变换background-position来达到变换效果, 但是直接使用会有这样的问题: css动画默认的动画过渡方式的平滑的,平滑的过渡对逐帧动画会造成类似滑动的效果,所以需要动画时间函数animation-timing-function中的steps属性来设置过渡方式,
这里先上demo对比:
.avatar { height: 200px; width: 200px; background: url(http://ww1.sinaimg.cn/large/67c839fajw1f2staqebnxj20nk05wjru.jpg) no-repeat 0 0; /*visibility: hidden; */ } .above:hover { -webkit-animation: run .6s steps(1) infinite; /*-webkit-animation: run .6s steps(1) infinite; */ } .down:hover {-webkit-animation: run .6s linear infinite;} @keyframes run { 0% {background-position: 0 0;} 25% {background-position: -200px 0;} 50% {background-position: -400px 0;} 75% {background-position: -600px 0;} 100% {background-position: 0 0;} } @keyframes run2 { 0% {background-position: 0 0;} 100% {background-position: -800px 0;} }
<h3>tips:鼠标悬停图片上方预览效果</h3> <p> 使用steps属性控制时间函数</p> <div class = 'avatar above'></div> <p> 使用linear控制时间函数</p> <div class = 'avatar down'></div>
这两个动画的区别仅在animation中时间函数参数:
.above:hover { -webkit-animation: run .6s steps(1,start) infinite; } /* 使用steps实现逐帧动画*/ .down:hover { -webkit-animation: run .6s linear infinite; } /* 常规时间函数linear产生平滑的滑动效果*/
【理解steps】
对于steps属性的理解,我翻过好几篇博客,但有点越讲越邪乎,我的理解,该属性用于控制动画关键帧的过渡(补间)方式, 常规的css动画过渡,都是平滑的, 正如上面demo中所展示, 浏览器会自动为关键帧的间隔中插入补间动画(学过flash的朋友对这几个概念应该很熟悉) ,以便视觉上不会出现闪烁, css控制过渡方式的属性是animation-timing-function ,它的值除了可以设置贝塞尔曲线Cubic-bezier(类似的ease,linear等也属于曲线函数) 还有就是我们的steps,该属性的语法为steps(number, start|end) 接受两个参数,第一个参数为正整数,将一段动画分成number段,第二个参数为为关键帧的变化位置, 默认为end
steps将动画分成n段(n为第一个参数) 也就是设置补间动画的间隔数,比如从白色到黑色的过渡,常规曲线函数会渐进地补间其中的灰色, 而如果将设置为steps(2),则中间的补间只有一个rgb都为125的灰色,而start与end可以理解为关键帧的跳跃时机, 设置为start的时候,关键帧在0秒完成跳跃,由于在0秒已经完成了跳跃,所以我们视觉上所见的也就是第一个关键帧之后的一帧
将其第一个参数设为steps(1) ,意味着将不对动画分段,也就是不插入补间动画,这样也就实现了逐帧播放,由于steps这个特性,反之,如果我们将动画只设置两个关键帧,由steps(4)来分段,那么就省去了手动设置keyframes中的百分比关键帧。
于是在对比demo中,我们可以加入另一个实现同样效果的动画:
@keyframes run2 { 0% {background-position: 0 0;} 100% { background-position: -800px 0; /* 直接将后关 键帧设置为图片末尾,在animation属性设置中就可以利 用steps分段的特性来省去手动设置keyframes */ } }
等效转换:
.above:hover { -webkit-animation: run .6s steps(4) infinite; /*-webkit-animation: run .6s steps(1) infinite; */ } @keyframes run { from{background-position:0px 0px;} to{background-position: -800px 0px;} }
等价于
.above:hover { -webkit-animation: run .6s steps(1) infinite; /*-webkit-animation: run .6s steps(1) infinite; */ } @keyframes run { 0% { background-position: 0 0; } 25% { background-position: -200px 0; } 50% { background-position: -400px 0; } 75% { background-position: -600px 0; } 100% { background-position: 0 0; } }
.
相关推荐
本文将深入探讨如何利用 `css3-animation` 实现逐帧动画效果,这对于创建动态图形、游戏元素或复杂的视觉效果非常有用。 首先,我们需要了解 CSS3 的 `@keyframes` 规则,它是创建动画的核心。`@keyframes` 允许...
CSS3引入了`steps()`函数,可以在`animation-timing-function`中使用,来实现逐帧动画效果。使用CSS3实现逐帧动画的方法简单、高效,兼容性好,适合快速开发,但是其控制性不如JavaScript灵活。 ### 实战案例:使用...
这个效果通过结合帧动画和3D变换,利用CSS3的`animation`属性及其相关参数,尤其是`animation-timing-function`中的`steps`函数,为用户提供了一种复古而有趣的视觉体验。 首先,我们来看`animation`属性。这是CSS3...
本资源“CSS3 steps属性制作僵尸行Sprite动画特效源码.zip”就是一个利用CSS3的steps函数来创建僵尸行走的Sprite动画效果的示例。下面将详细介绍CSS3的steps函数及其在动画制作中的应用。 **CSS3的steps函数** ...
【CSS3 Sprite僵尸行走动画特效】是一种利用CSS3的先进特性来实现的动态效果,它巧妙地结合了精灵图(Sprite)技术和CSS3的动画功能,以创建出一个逼真的僵尸行走循环动画。在Web开发中,CSS3 Sprite技术是为了减少...
【纯CSS3 3D立体圆盘时钟动画】是一种利用CSS3的特性来实现的交互式时钟展示效果,它无需JavaScript或者其他编程语言,仅通过CSS3的样式规则就能创建出具有3D视觉效果的立体圆盘时钟。这个项目展示了CSS3的强大功能...
【CSS3僵尸行走动画代码】是一种利用CSS3的高级特性,特别是`animation`和`steps()`函数,来创建一个有趣且吸引人的动态效果。在这个案例中,开发者通过结合图像精灵(CSS Sprite)技术和动画,使得僵尸形象在网页上...
2. **CSS3动画**:关键帧动画(@keyframes)是实现动态效果的关键。通过定义动画的起始和结束状态,以及中间状态,可以创建时钟指针旋转的动画效果。 3. **CSS3 transforms**:利用`transform`属性,可以改变元素的...
本文将深入探讨如何利用CSS3实现文字标题的动态效果,包括翻转和打字等特效,并确保这些效果在主流浏览器中具有良好的兼容性。 首先,CSS3中的关键帧动画(@keyframes)是实现动画效果的核心工具。通过定义动画从...
通过上述步骤,我们成功地利用CSS3 Sprite技术和关键帧动画创建了一个僵尸行走的动态效果。这种方法不仅适用于游戏,还可以应用于各种网页交互设计,如按钮状态变化、加载动画等。值得注意的是,虽然CSS3的动画功能...
总结,CSS3 Sprite僵尸行走动画特效利用了CSS3的steps函数和关键帧动画,实现了高效且流畅的视觉效果。通过理解和应用这些技术,开发者可以创建各种吸引人的交互式网页元素,提升用户在网页上的体验。
这里的`counter-increment`设置了每秒递增1,`animation`则设置了动画持续1小时,每帧都是立即完成(`steps(1, end)`)。 同时,为了提升用户体验,我们可以添加一些视觉特效,如背景颜色变化、字体动画等。CSS3...
在CSS中实现计时功能通常涉及到CSS动画(CSS Animations)和关键帧(Keyframes)。在给定的文档中,示例代码展示了一个简单的计时...然而,这个例子提供了一个基本的视觉效果,展示了如何利用CSS来创造动态的视觉效果。
本文将深入探讨如何利用CSS3来创建富有创意的文字标题动画效果,如翻转和打字效果。 ### 1. CSS3关键帧动画(@keyframes) CSS3的关键帧动画允许我们定义一个动画过程中的多个状态,然后浏览器会自动补全这些状态...
在本文中,我们将学习如何利用CSS3的动画属性制作一个简单的动态效果,以及如何通过雪碧图(CSS Sprite)结合animation和steps函数来实现一个类似GIF的动画效果。 首先,CSS3为动画制作提供了强大的支持。现代主流...
纯CSS3文字Loading动画特效是一种利用CSS3特性实现的创新加载效果,它将普通的加载指示器与文字结合,为用户提供了更加生动且富有个性化的等待体验。这种动画效果无需JavaScript或者其他复杂的编程语言,只需通过CSS...
`animation-timing-function`中的`steps()`函数可以用来实现逐帧动画。`steps()`函数有两个参数,第一个参数指定时间函数中的间隔数量,它必须是正数,表示动画的帧数。第二个参数可以是`start`或`end`,它指定了在...
2. **定义CSS样式**:然后,通过CSS设置元素的初始状态(例如僵尸的静止图像),并定义关键帧动画。使用`@keyframes`规则定义动画的起始和结束状态,以及可能的中间状态。例如,僵尸可能有不同的腿部动作、头部摇晃...
`animation`属性用于应用关键帧动画,它包括多个子属性,如`animation-name`(定义动画的名称)、`animation-duration`(设定动画持续时间)、`animation-timing-function`(控制速度曲线,如线性、ease、ease-in-...
CSS3关键帧动画(@keyframes) CSS3的`@keyframes`规则是创建动画的基础,它定义了一个动画从开始到结束时各个阶段的样式。例如,创建一个旋转动画: ```css @keyframes spin { 0% { transform: rotate(0deg); }...