css3 模拟gif每桢 CSS3 animation属性中的steps实现GIF动图(逐帧动画)

相信 animation 大家都用过很多，知道是 CSS3做动画用的。而我自己就只会在 X/Y轴 上做位移旋转，使用 animation-timing-function 规定动画的速度曲线，常用到的 贝塞尔曲线。但是这些动画效果都是连续性的。

今天发现个新功能 animation-timing-function 的另外个属性值steps()功能符，可以让动画不连续，就是制作逐帧动画。

steps(n,start/end)

第一个参数 number 为把动画分为 n 步阶段性展示，表示把我们的动画分成了多少段；

第二个参数默认为 end，设置最后一步的状态，start 为结束时的状态，end 为开始时的状态。

第二个参数具体说就是，emmmm.....................我寄几也没详细看(没理解)，附上传送门你们看下张鑫旭大神的讲解CSS3 animation属性中的steps功能符深入介绍

这里只需要第一个参数就好了

这张素材宽高：2128*241、总共为8帧，故steps(8)

CSS3 animation属性中的steps实现GIF动图(逐帧动画)

.main {

margin: 100px auto;

width: 266px;

height: 241px;

background: url(./test.jpg);

background-size: 2128px;

animation: sprite5 1s steps(8) infinite

}

@keyframes sprite5 {

0% {

background-position: 0 0

}

100% {

background-position: -2128px 0;

}

}

ok，大功告成，效果预览，当然这张GIF来的

css3 animation 属性众妙

转自:凹凸实验室(https://aotu.io/notes//11/28/css3-animation-properties/) 本文不会详细介绍每个 css3 animation 属性(需 ...

animation中的steps()逐帧动画

在我们平时做宽高确定,需要背景图片切换的效果时,我如果用的是一张大的png图片.而且恰好是所有小图都是从左向右排列的,那么 我们只需测量出某一个小图距左侧有多少像素(x),然后我们banckgroun ...

css3 animation实现逐帧动画

css3里面的animation属性非常强大,但是自己用的比较少,最近有次面试就刚好被问到了,趁现在有时间就对animation做一个小总结.同时实现一个逐帧动画的demo作为练习 animation ...

Android笔记(六十三) android中的动画——逐帧动画( frame-by-frame animation)

就好像演电影一样,播放实现准备好的图片,来实现动画效果. 逐帧动画需要用到AnimationDrawable类,该类主要用于创建一个逐帧动画,然后我们把这个动画设置为view的背景即可. androi ...

css3 实现逐帧动画

css3 实现逐帧动画 实现逐帧动画需要使用到的是Animation动画,该CSS3的Animation有八个属性:分别是如下:1: animation-name2: animation-durati ...

css3逐帧动画

写css3动画的时候,我们经常用到animation来实现,默认情况下,animation是属于连贯性的ease动画.我们熟悉的animation动画有ease.ease-in.ease-out.li ...

Android动画效果之Frame Animation(逐帧动画)

前言: 上一篇介绍了Android的Tween Animation(补间动画)Android动画效果之Tween Animation(补间动画),今天来总结下Android的另外一种动画Frame ...

过渡与动画 - 逐帧动画&steps调速函数

写在前面 上一篇中我们熟悉五种内置的缓动曲线和(三次)贝塞尔曲线,并且基于此完成了缓动效果. 但是如果我们想要实现逐帧动画,基于贝塞尔曲线的调速函数就显得有些无能为力了,因为我们并不需要帧与帧之间的过 ...

Android中实现一个简单的逐帧动画(附代码下载)

场景 Android中的逐帧动画,就是由连续的一张张照片组成的动画. 效果 注: 博客: /badao_liumang_qizhi 关注公众号 霸道的程序猿 ...

随机推荐

New Year Transportation(水)

New Year Transportation Time Limit:2000MS Memory Limit:262144KB 64bit IO Format:%I64d & ...

如何创建一个一流的SDK?

怎么样的SDK算是一个好的SDK? 在做SDK的过程中我们走过非常多的弯路,是一个难以想象的学习过程,我们总结一个好的SDK应该具备的特质: 易用性,稳定性,轻量,灵活,优秀的支持. 一.易用性 因为 ...

Miscellaneous Articles

标记一下,慢慢看 http://www.oracle-/articles/misc/articles-misc.php Miscellaneous Articles DBA Deve ...

【Windows】关于shift跟空格同时按无反应的解决方案

在玩游戏中我们经常会遇到各种功能键的使用方法 例如shift跟空格,由于我以前经常要加速大跳,突然发现shift跟空格一起按没有效果,语言设置里也没有相关的快捷键设置到,所以网上查询了一番,至此,问题 ...

Leetcode -- 258 数位相加

258. Given a non-negative integernum, repeatedly add all its digits until the result has only one d ...

PHP(基础语法：执行原理)

控制语句for循环 for(var i=0:i<0;++i){ }(基础语法):执行原理for:用在已知数量的情况下(循环次数)while:循环次数不确定(满足某个条件退出循环) 死循环:没有结 ...

3&period; Tensorflow生成TFRecord

1. Tensorflow高效流水线Pipeline 2. Tensorflow的数据处理中的Dataset和Iterator 3. Tensorflow生成TFRecord 4. Tensorflo ...

大牛都是这样写测试用例的，你get到了嘛？

1. 用于语句覆盖的基路径法 基路径法保证设计出的测试用例,使程序的每一个可执行语句至少执行一次,即实现语句覆盖.基路径法是理论与应用脱节的典型,基本上没有应用价值,读者稍作了解即可,不必理解和掌握. ...

xgboost&sol;gbdt在调参时为什么树的深度很少就能达到很高的精度？

问题: 用xgboost/gbdt在在调参的时候把树的最大深度调成6就有很高的精度了.但是用DecisionTree/RandomForest的时候需要把树的深度调到15或更高.用RandomFore ...

&&num;39&semi;Neither SQLALCHEMY&lowbar;DATABASE&lowbar;URI nor SQLALCHEMY&lowbar;BINDS is set&period;

UserWarning: Neither SQLALCHEMY_DATABASE_URI nor SQLALCHEMY_BINDS is set. Defaulting SQLALCHEMY_DATA ...