animation steps属性

最新推荐文章于 2023-02-28 10:13:05 发布
最新推荐文章于 2023-02-28 10:13:05 发布
阅读量311 收藏
点赞数
分类专栏： css 文章标签： 动画 css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42374676/article/details/106427715
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hi{
            width: 50px;
            height: 72px;
            background-image: url("http://s.cdpn.io/79/sprite-steps.png");
            /*深度理解
            *整个动画1s完成。
            *这里1s要移动500的像素，这1s要有十步走完，每步是平均下来是0.1s，
            *每步比上一步多走了72px的位置，这个走是瞬间走到的。
            *end表示每一步在接近0.1s再去走
            */
            /* animation: play 1s steps(10,end) infinite; */
            animation: play 1s steps(10,start) infinite;

        }
        /*定义动画*/
        @keyframes play {
            from { background-position:    0px 0px; }
            to { background-position: -500px 0px; }
        }
    </style>
</head>
<body>
<img src="http://s.cdpn.io/79/sprite-steps.png" alt="此图片是500*72，主要是为了显示作用">
<div class="hi"></div>
 
</body>
</html>

参考:https://blog.csdn.net/LY_code/article/details/80209183?utm_source=blogxgwz0

animation-fill-mode : none | forwards | backwards | both;

none 不改变默认行为。 forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。 backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。 both 向前和向后填充模式都被应用。

web修理工
关注
专栏目录
css动画animation属性
AiHongHong_的博客
12-05 1453
IE 10和Firefox（>= 16）支持没有前缀的animation，firefox（
html animation 属性,CSS3动画属性：动画(animation)
weixin_39522927的博客
06-04 1766
一：动画(animation)的参数详解由于上面用到了animation动画，这里详细介绍下这个animation的参数。简介CSS动画(Animations)简单说就是在一段固定的动画时间内暗中在某一频率内改变其CSS某个或某些值,从而达到视觉上的转换动画效果。Animations的很多方面都是可以控制的，包括动画运行时间，开始值和结束值，还有动画的暂停和延迟其开始时间等。语法 = || |...
css3中用animation的steps属性制作帧动画
11-21
昨天火急火燎地接到一个任务，说是要做一个掷骰子的游戏，关于掷骰子期间的过渡动画，我本来是想用css 3d制作一个立体的骰子，然后叫UI给6张平面图贴上去。再用translate3d来操作。然而UI考虑得十分周到，直接就给了我一个雪碧图，并告诉我在photoshop中可以用帧动画来播放几张图片，达到类似gif的效果，程序上实现也大抵如此吧。 　　卧槽真是个神奇的UI boy。 　 于是我顺着他的思路，用上了animation在timing-function中的steps属性。 　　先来看看UI给的图吧，是这样的：（注：图片宽度1200px） 　　 　　如果要播放这张图片的话，很明显是分为五个帧，
CSS3 - animation的steps属性
asfcyg的博客
11-01 1032
语法：steps(number , position) 它有两个参数： 1. number：数值 表示我们把动画分成了多少段 比如我们写一个颜色过渡的例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl
animation 里的steps函数
qq_43437571的博客
08-17 2218
animation-timing-function 规定动画的速度曲线 除了ease，linear、cubic-bezier之类的过渡函数都会为其插入补间, 动画效果是连贯性的。但有些效果不需要补间，只需要关键帧之间的跳跃，这时应该使用steps过渡方式 理解steps steps函数指定了一个阶跃函数 第一个参数指定了时间函数中的间隔数量（必须是正整数） 第二个参数可选，接受 start和 end两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。 step-start等同于steps(1,
CSS3——animation中的属性--steps
weixin_30902251的博客
07-23 127
steps 点击查看steps小demo 配合animation来使用的（跳转动画）如果添加了这个stpe就添加不了cubic-bezier 我们先来看一下没设置steps前的animation是什么样子的，我们看到现在过渡动画是很流畅的，也是渐渐过渡到下一个颜色的 我们再来看一下设置了steps的样子。 括号里面的值是可以变动的，现在我们填入1，他是在0%这段动画里面，以...
CSS3 animation steps
落枫秋歌
12-02 424
背景 css3引入了transition和animation属性为我们提供了强大的动画效果，也为前端设计和实现提供更多的可能性； 需求：利用给定的一组图片，实现动画效果； 优势：纯CSS实现，不需要借助gif；更好的性能表现 Action：借助animation steps实现； 属性介绍 用法：steps(n, <jumpterm>) steps其实是一个分段的阶跃函数，n相当于单...
纯CSS3炫酷animation动画steps属性打造西洋镜动画特
12-13
这是一款效果非常炫酷的纯CSS3西洋镜动画特效。该西洋镜动画使用CSS3的帧动画和3D transforms来制作，在animation动画的animation-timing-function参数使用steps来处理，制作出类似西洋镜的连续动画效果。
CSS3 steps属性制作僵尸行Sprite动画特效源码.zip
10-31
本资源“CSS3 steps属性制作僵尸行Sprite动画特效源码.zip”就是一个利用CSS3的steps函数来创建僵尸行走的Sprite动画效果的示例。下面将详细介绍CSS3的steps函数及其在动画制作中的应用。 **CSS3的steps函数** ...
html中steps属性是什么意思,理解CSS3 Animation中的steps()
weixin_39952502的博客
06-08 837
对CSS3 Animation，相信大家都不陌生了，其有八大属性：animation-name：动画名称animation-duration：规定完成一个周期所花费的时间(秒或毫秒)animation-delay：定义动画开始前等待的时间，以秒或毫秒计。默认值为0animation-iteration-count：规定动画被播放的次数(默认1)animation-play-state：规定动画是否...
animation的steps()用法详解
汉堡请不要欺负面条
02-06 9059
一.steps介绍 steps()是一个timing function（animation中），允许我们将动画或者过渡分割成段，而不是从一种状态持续到另一种状态的过渡。 Steps(&lt;number_of_steps&gt;，&lt;direction&gt;) 两个参数：第一个参数是一个正值，指定动画分割的段数。第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点...
css3 animation steps来…
夕雨林流金,web全栈,web全端,网站技术博客
04-13 411
CSS3 animation的steps方式过渡 　　animation默认以ease方式过渡，它会在每个关键帧之间插入补间动画，所以动画效果是连贯性的。除了ease，linear、cubic-bezier之类的过渡函数都会为其插入补间。但有些效果不需要补间，只需要关键帧之间的跳跃，这时应该使用steps过渡方式。 　　比如GIF动图不支持程序对播放的控制，也不支持Alpha通道。但如果我们用一
animation中的steps()逐帧动画
weixin_30674525的博客
11-28 448
在我们平时做宽高确定，需要背景图片切换的效果时，我如果用的是一张大的png图片。而且恰好是所有小图都是从左向右排列的，那么 我们只需测量出某一个小图距左侧有多少像素(x)，然后我们banckground-position:-x 0;就可以显示出来当前我们想要的这个小图。 用steps(n,start/end)做逐帧动画时也是在不断地切换显示的背景图片。如果按照上边的说法，我只要量出距左侧有多少像...
css3中animation的steps分步动画
細水、長流√的专栏
02-28 2461
css的animation中，有一种描述动画变化速率的东西，例如常见的linear,ease-in,ease-out等，这些都是连续的变化，还有一种叫做steps的，它用来描述一种不连续的动画，也就是逐帧动画。如果为end，走的就是1,2,3,4,5。这个图，我相信大家肯定都看过，但是这个图，很容易让人产生误解，steps中的number，指的是走了number步，但是实际上呢，却是将整个动画分成了number+1份。设置为end，丢弃最后一个，只播放1，2，3，4，5，6，可以完整播放。
CSS3中animation中的steps()逐帧动画
热门推荐
zbwroom的博客
08-23 1万+
首先我们先看一下效果图 //这里是HTML代码 <div class="birdBox"> <div class="bird"></div> </div> //这里是css代码 *{margin: 0;padding: 0;} html ,body{ width: 100%; height: 100%;
CSS3中animation的帧动画steps()
sayUonly的博客
12-16 1382
animation的时间函数预设值有：linear ease ease-in ease-out ease-in-out cubic-bezier。 这些线性函数都会自动插入补间动画，以保证动画的连贯性。但是在很多复杂动画里，是无法自动补差的。为了能有良好的效果，我们可以在美术大大的协助下完成一个优美的逐帧动画。 比如这张图： 这个小人的每个动作被均匀的插入一张图片中，一共分了8个动作。为了让小人动...
【案例】animation动画曲线之steps的使用
qq_43632490的博客
08-03 344
steps
web前端动画--animation steps(num,type)详解
CS13477062349的博客
03-28 763
一般动画用到的几个属性： animation:name duration timing-function delay iteration-count direction 其实这里主要介绍的是 timing-function 的steps(num,type) 1.它是一个阶跃性函数，就是说它没有中间渐变的过程，直接从一个状态变到另一个状态； 2.它的第一个参数 作用于每两个关键帧之间，把他分...
【译】css动画里的steps()用法详解
weixin_33962621的博客
09-29 1203
原文地址：http://designmodo.com/steps-c...原文作者：Joni Trythall 我想你在css 动画里使用steps()会和我一样有很多困惑。一开始我不清楚怎样使用它，于是搜索出了两个案例：typing demo by Lea Verou 和 animated sprite sheet by Simurai...
css3动画animation的steps
最新发布
08-23
CSS3动画的`animation`属性可以使用`steps()`函数来创建步进动画。`steps()`函数接受两个参数：第一个参数表示动画的总步骤数，第二个参数表示在每个步骤上应用的样式。 例如，如果要创建一个由4个步骤组成的动画，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

web修理工

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值