css动画帧动画效果,css逐帧动画

我们经常使用css3中的animation动画，比如这样：

.fadeIn{

animation: fadeIn .5s ease 1s both;

}

@keyframes fadeIn{

from{

opacity:0;

}

to{

opacity:1

}

这样就实现了延时1s，一共0.5s的淡入动画。其中ease是animation-timing-function的默认值。

animation-timing-function使用了三次贝塞尔(Cubic Bezier)函数生成速度曲线，可以让我们的动画产生平滑的过渡。

但是有的时候我们并不想要平滑的过渡，比如想要实现下面小人跑动的效果，该怎么实现呢？

小人跑动动画

我们可以将小人跑动的动作分解，拼成下面的雪碧图：

小人动作分解

通过设置不同的background-position设置不同时间小人不通的动作

@keyframes run {

0% {

background-position: 0 0

}

10%{

background-position: -100% 0

}

20%{

background-position: -200% 0

}

30%{

background-position: -300% 0

}

40%{

background-position: -400% 0

}

50%{

background-position: 0 -100%

}

60%{

background-position: -100% -100%

}

70%{

background-position: -200% -100%

}

80%{

background-position: -300% -100%

}

90%{

background-position: -400% -100%

}

100%{

background-position: 0 0

}

用animation让动画动起来吧，想让动画每帧动，而不带中间的过渡效果animation-timing-function要设置成steps函数

.people{

width: 100px;

height: 114px;

background: url(../images/people.png);

-webkit-animation:run 1s steps(1) 0s infinite both;

animation:run 1s steps(1) 0s infinite both;

}

小人跑动动画

小人动起来啦！

或者更简单，把雪碧图拼成这样：

小人动作分解.png

.people{

width: 100px;

height: 114px;

background: url(../images/people.png);

-webkit-animation:run 1s steps(9) 0s infinite both;

animation:run 1s steps(9) 0s infinite both;

}

@-webkit-keyframes run {

to{

background-position: -900% 0

}

steps函数接受两个参数，第一个参数会根据你指定的步进数量，把整个动画切分为多帧，第二个可选的参数可以是 start 或 end(默认)。这个参数用于指定动画在每个循环周期的什么位置发生帧的切换动作。还可以使用 step-start 和 step-end 这样的简写属性,它们分别等同于 steps(1, start) 和 steps(1, end)

很多时候我们的gif动画都可以直接用css效果实现，快来试试吧！

css动画帧动画效果,css逐帧动画相关推荐

【Android笔记25】Android中的动画效果之逐帧动画
这篇文章,主要介绍Android中的动画效果之逐帧动画. 目录一.逐帧动画 1.1.什么是逐帧动画 1.2.逐帧动画的使用 (1)创建drawable动画资源<
CSS3 帧动画分段,CSS3 animation实现逐帧动画效果
css3里面的animation属性非常强大,但是自己用的比较少,最近有次面试就刚好被问到了,趁现在有时间就对animation做一个小总结.同时实现一个逐帧动画的demo作为练习 animation ...
html逐帧动画,谈谈网页中实现逐帧动画
前言我们在网页中经常需要一些动画效果,假如你的动画效果需要人为控制停止或者播放,我们一般就不会用gif来实现了!这里,就引出了我们今天讲到的逐帧动画!今天主要讲解几种方式来实现逐帧动画!大家可以根据 ...
效果奇特的HTML5动画,12个效果奇特的HTML5动画赏析
本文将为大家分享12个效果奇特的HTML5动画,HTML5强大的动画特性可以让你的网页变得更加生动和富有活力,交互性也会进一步得到提高.一起来看看下面的这些HTML5动画案例,每个案例都提供源代码下载 ...
效果奇特的HTML5动画,12个效果奇特的HTML5动画赏析 – 码农网
1.HTML5 Canvas瀑布动画超逼真这次我们来分享一款很酷的HTML5 Canvas瀑布动画,瀑布动画非常逼真.整个瀑布动画像是从石头缝里流出来的溪水,然后沿着悬崖飞落下来,效果非常不错. ...
java实现逐帧图片_java – 如何逐帧读取视频？
我想逐帧读取 java8-64bit中的Mp4文件,并将每个帧作为jpg写入我的硬盘.我的第一次尝试是使用 JavaFX 2.2媒体播放器播放该文件在View组件上.我想也许会有一个选项来注册一个观 ...
如何在css中设置音乐效果,css实现简单音乐符效果
css实现简单音乐符效果利用css3中的transform.animation.keyframes实现 1 2 3 4 5 6 7 Document 8 9 .box{ 10 width:60px; ...
CSS或JS实现逐帧动画方案
什么是逐帧动画逐帧动画是一种在连续的关键帧中分解动画动作,即在时间轴的每一帧上绘制不同内容并使之连续播放成动画的一种常见的动画形式.与CSS关键帧动画不同的是,逐帧动画每一帧需要自行定义:关键帧动画 ...
html5+css3实现动画、逐帧动画效果
上篇博文中讲明了html5+css3实现2D-3D动画效果,介绍了html5中2d.3d的运用,顺便简明的提到了动画,而本篇将更加详细的说明动画的各运用及说明. 首先我们需要了解css3中动画的意思, ...
Android—逐帧、补间、属性动画
1.Tween Animation 补间动画这类动画比较简单,一般就是平移.缩放.旋转.透明度,或者其组合,可以用代码或者xml文件的形式,推荐使用xml文件形式,因为可以复用. 四个动画效果实现类 ...

css动画帧动画效果,css逐帧动画

css动画帧动画效果,css逐帧动画相关推荐

最新文章

热门文章