`

利用CSS steps 实现逐帧动画

阅读更多

【前言】

    本文总结下利用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;
		  }
		}

 

 

 

 

 

 

 

 

 

 

 

.

  • 大小: 20.5 KB
分享到:
评论

相关推荐

    利用css3-animation实现逐帧动画效果

    本文将深入探讨如何利用 `css3-animation` 实现逐帧动画效果,这对于创建动态图形、游戏元素或复杂的视觉效果非常有用。 首先,我们需要了解 CSS3 的 `@keyframes` 规则,它是创建动画的核心。`@keyframes` 允许...

    7动效开发 4:逐帧动画(1).md

    CSS3引入了`steps()`函数,可以在`animation-timing-function`中使用,来实现逐帧动画效果。使用CSS3实现逐帧动画的方法简单、高效,兼容性好,适合快速开发,但是其控制性不如JavaScript灵活。 ### 实战案例:使用...

    CSS3实现西洋镜连续动画特效

    这个效果通过结合帧动画和3D变换,利用CSS3的`animation`属性及其相关参数,尤其是`animation-timing-function`中的`steps`函数,为用户提供了一种复古而有趣的视觉体验。 首先,我们来看`animation`属性。这是CSS3...

    CSS3 steps属性制作僵尸行Sprite动画特效源码.zip

    本资源“CSS3 steps属性制作僵尸行Sprite动画特效源码.zip”就是一个利用CSS3的steps函数来创建僵尸行走的Sprite动画效果的示例。下面将详细介绍CSS3的steps函数及其在动画制作中的应用。 **CSS3的steps函数** ...

    CSS3 Sprite僵尸行走动画特效.zip

    【CSS3 Sprite僵尸行走动画特效】是一种利用CSS3的先进特性来实现的动态效果,它巧妙地结合了精灵图(Sprite)技术和CSS3的动画功能,以创建出一个逼真的僵尸行走循环动画。在Web开发中,CSS3 Sprite技术是为了减少...

    纯CSS3 3D立体圆盘时钟动画

    【纯CSS3 3D立体圆盘时钟动画】是一种利用CSS3的特性来实现的交互式时钟展示效果,它无需JavaScript或者其他编程语言,仅通过CSS3的样式规则就能创建出具有3D视觉效果的立体圆盘时钟。这个项目展示了CSS3的强大功能...

    CSS3僵尸行走动画代码

    【CSS3僵尸行走动画代码】是一种利用CSS3的高级特性,特别是`animation`和`steps()`函数,来创建一个有趣且吸引人的动态效果。在这个案例中,开发者通过结合图像精灵(CSS Sprite)技术和动画,使得僵尸形象在网页上...

    纯css3实现动态时钟效果.zip

    2. **CSS3动画**:关键帧动画(@keyframes)是实现动态效果的关键。通过定义动画的起始和结束状态,以及中间状态,可以创建时钟指针旋转的动画效果。 3. **CSS3 transforms**:利用`transform`属性,可以改变元素的...

    css3文字标题动画效果,支持翻转,打字等效果。兼容主流浏览器

    本文将深入探讨如何利用CSS3实现文字标题的动态效果,包括翻转和打字等特效,并确保这些效果在主流浏览器中具有良好的兼容性。 首先,CSS3中的关键帧动画(@keyframes)是实现动画效果的核心工具。通过定义动画从...

    CSS3+Sprite实现僵尸行走动画特效

    通过上述步骤,我们成功地利用CSS3 Sprite技术和关键帧动画创建了一个僵尸行走的动态效果。这种方法不仅适用于游戏,还可以应用于各种网页交互设计,如按钮状态变化、加载动画等。值得注意的是,虽然CSS3的动画功能...

    CSS3 Sprite僵尸行走动画特效特效代码

    总结,CSS3 Sprite僵尸行走动画特效利用了CSS3的steps函数和关键帧动画,实现了高效且流畅的视觉效果。通过理解和应用这些技术,开发者可以创建各种吸引人的交互式网页元素,提升用户在网页上的体验。

    css3_倒计时_实用网页特效

    这里的`counter-increment`设置了每秒递增1,`animation`则设置了动画持续1小时,每帧都是立即完成(`steps(1, end)`)。 同时,为了提升用户体验,我们可以添加一些视觉特效,如背景颜色变化、字体动画等。CSS3...

    使用css实现计时功能.docx

    在CSS中实现计时功能通常涉及到CSS动画(CSS Animations)和关键帧(Keyframes)。在给定的文档中,示例代码展示了一个简单的计时...然而,这个例子提供了一个基本的视觉效果,展示了如何利用CSS来创造动态的视觉效果。

    CSS3文字标题动画效果特效代码

    本文将深入探讨如何利用CSS3来创建富有创意的文字标题动画效果,如翻转和打字效果。 ### 1. CSS3关键帧动画(@keyframes) CSS3的关键帧动画允许我们定义一个动画过程中的多个状态,然后浏览器会自动补全这些状态...

    CSS3动画制作的简单示例

    在本文中,我们将学习如何利用CSS3的动画属性制作一个简单的动态效果,以及如何通过雪碧图(CSS Sprite)结合animation和steps函数来实现一个类似GIF的动画效果。 首先,CSS3为动画制作提供了强大的支持。现代主流...

    纯CSS3文字Loading动画特效

    纯CSS3文字Loading动画特效是一种利用CSS3特性实现的创新加载效果,它将普通的加载指示器与文字结合,为用户提供了更加生动且富有个性化的等待体验。这种动画效果无需JavaScript或者其他复杂的编程语言,只需通过CSS...

    详解Css3新特性应用之过渡与动画

    `animation-timing-function`中的`steps()`函数可以用来实现逐帧动画。`steps()`函数有两个参数,第一个参数指定时间函数中的间隔数量,它必须是正数,表示动画的帧数。第二个参数可以是`start`或`end`,它指定了在...

    HTML5僵尸行走动画代码.zip

    2. **定义CSS样式**:然后,通过CSS设置元素的初始状态(例如僵尸的静止图像),并定义关键帧动画。使用`@keyframes`规则定义动画的起始和结束状态,以及可能的中间状态。例如,僵尸可能有不同的腿部动作、头部摇晃...

    11种炫酷打开模态窗口过渡动画特效

    `animation`属性用于应用关键帧动画,它包括多个子属性,如`animation-name`(定义动画的名称)、`animation-duration`(设定动画持续时间)、`animation-timing-function`(控制速度曲线,如线性、ease、ease-in-...

    css3 loading

    CSS3关键帧动画(@keyframes) CSS3的`@keyframes`规则是创建动画的基础,它定义了一个动画从开始到结束时各个阶段的样式。例如,创建一个旋转动画: ```css @keyframes spin { 0% { transform: rotate(0deg); }...

Global site tag (gtag.js) - Google Analytics