正文

深入css3帧动画实现ps时间轴动画效果steps()（前端网备份）(代码片段)

lsc-boke  lsc-boke  2022-12-18  402

关键词：

在应用 CSS3 渐变/动画时，有个控制时间的属性 <timing-function> 。它的取值中除了常用到的三次贝塞尔曲线以外，还有个让人比较困惑的 steps() 函数。

steps() 第一个参数 number 为指定的间隔数（必须是正整数），即把动画分为 n 步阶段性展示，第二个参数默认为 end，设置最后一步的状态，start 为结束时的状态，end 为开始时的状态。

技术图片

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>spirit动画</title>
        <link rel="stylesheet" href="">
        <style>
        .birdbackground: url(https://cdn.files.qdfuns.com/note/content/picture/201905/28/145522gd9yxe94l5px8222.jpg) -100% 0;
        width: 140px;
        height:85px;
        animation: bird 4s steps(1,end) 1 forwards ;
         
        @keyframes bird
           0% 
            background-position: 0 0;
            
            10%
                background-position: -100% 0;
            
            20%
                background-position: -200% 0;
            
            30%
                background-position: -300% 0;
            
            50%
                background-position: 0 100%;
            
            60%
                background-position: -100% 100%;
            
            70%
                background-position: -200% 100%;
            
            80%
                background-position: -300% 100%;
            
            90%
                background-position: 0 0;
            
            100%
                background-position: -100% 0;
            

        
        </style>
    </head>
    <body>
        <div class="bird"></div>
    </body>
</html>

View Code

经测试，双排图片用steps(1)这样一帧去写，如果设计图是单排的话,如:
技术图片
的话，可以用steps(10)去写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hi
            width: 50px;
            height: 72px;
            background-image: url("https://cdn.files.qdfuns.com/note/content/picture/201905/28/150117p6sbit8yihupt8ej.png");
            /*深度理解
            *整个动画1s完成。
            *这里1s要移动500的像素，这1s要有十步走完，每步是平均下来是0.1s，
            *每步比上一步多走了72px的位置，这个走是瞬间走到的。
            *end表示每一步在接近0.1s再去走
            */
            animation: play 1s steps(10) infinite;
        
        /*定义动画*/
        @keyframes play 
            from  background-position:    0px 0px; 
            to  background-position: -500px 0px; 
        
    </style>
</head>
<body>
<img src="https://cdn.files.qdfuns.com/note/content/picture/201905/28/150117p6sbit8yihupt8ej.png" alt="此图片是500*72，主要是为了显示作用">
<div class="hi"></div>

</body>
</html>

View Code

第八十三节，css3动画效果

CSS3动画效果学习要点：1.动画简介2.属性详解3.简写和版本本章主要探讨HTML5中CSS3的动画效果，可以通过类Flash那样的关键帧模式控制运行。一．动画简介 CSS3提供了类Flash关键帧控制的动画效果，通过animation... 查看详情

css3帧动画

参考技术Aanimation动画除了可以实现补间动画外，还可以完成逐帧动画。在animation的属性中，有个属性animation-timing-function一共具有如下这些值CSS贝塞尔缓动就是完成补间动画的，比如流畅的缩放、位置移动等动画。但是逐帧动画... 查看详情

css3动画使用

参考技术Aanimation实现动画由俩个部分组成，通过类似flash动画的关键帧来申明一个动画，在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效果关键帧例如：调用关键帧：语法animation:animation-name animation-duration... 查看详情

深入理解requestanimationframe

...是requestAnimationFrame，顾名思义就是请求动画帧。为了深入理解 request 查看详情

深入理解requestanimationframe

...是requestAnimationFrame，顾名思义就是请求动画帧。为了深入理解 request 查看详情

动效设计principle：动画介绍

...被成功触发时，Principle会为名称相同的图层自动补全过渡动画效果，这个点非常关键，如果制作成功后，看不到对应的动画效果，务必检查两个画板之间的图层名称是否相同。看下图中的例子，画板1和2的矩形图层名称相同，都... 查看详情

css3动画的实例讲解—用css3实现摩天轮特效

...动态效果。在开始之前，先说下animation属性，原理是逐帧动画，通过关键帧控制动画的每一步，来实现最终的动态效果。而常用到的几个属性分别是：1.animation-name，设置元素动画的名字，自定义即可2.animation-duration，整个动画的... 查看详情

超慢速移动动画使用css3实现流畅效果

三角碎片以很缓慢的速度旋转移动。假设使用JS实现会出现一像素一像素移动的卡顿使用CSS3会获得很理想的效果transform:translate3d(80px,150px,0px)rotate(1220deg);transition:transform30slinear0s;上面一个属性表示图像变换translate3d(80px,150px,0px)表... 查看详情

cocoscreatorspine动画时间轴（事件时间轴，骨骼时间轴）

cocos版本：2.3.4spine版本：3.8 帧同步和Spine动画同步的问题这个主要是做帧同步时，spine动画上有自定义事件抛出，且动画骨骼上绑定了伤害判定的盒子。因为动画不是逻辑帧来驱动的，所以不同客户端播放动画速度不一样，... 查看详情

关于帧动画steps属性的理解

CSS3的Animation有八个属性animation-nameanimation-durationanimation-delayanimation-iteration-countanimation-directionanimation-play-stateanimation-fill-modeanimation-timing-function其中1-7大多都有介绍，但是animat 查看详情

css3动画

animation动画简介　　通过类似Flash动画的关键帧来声明一个动画，在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效　　一、transform（转换动画、直接动画）　　rotate（旋转）包含三种状态，x、y、z三轴的变化，... 查看详情

css3逐帧动画

<!doctypehtml><html><head><metacharset="utf-8"><title>png动画</title><style>div{/steps:为图片的总帧数，也就是说背景图里面有多少个多里的图片/animation:5ssteps(23)0snormalnoneinfiniterunni 查看详情

css3速移动效果动画流畅无卡顿

...移动效果会有卡顿利用CSS3可以很简单的实现流畅的移动动画transform:translate3d(66px,88px,0px)rotate(45deg);transition:transform3slinear0s;说明：translate3d(66px,88px,0)表示X轴偏移66px，Y轴偏移88pxrotate(45deg)表示在此过程中旋转查看详情

khl00511-计算机-本职-前台css3动画

animation动画效果组成通过类似Flash动画中的关键帧来声明一个动画在animation属性中调用关键帧声明的动画，从而实现一个更为复杂的动画效果animation的子属性animation-name:主要用来指定一个关键帧动画的名字，这个动画名必须对应... 查看详情

css3动画效果

使用css3的动画属性来实现js的移动效果先把类名和CSS属性写好。使用transition全局属性来实现动画从左到右的移动宽度的时间。使用transition-property属性来指定类名的宽度移动效果的时间。使用transition-delay来实现它的延迟时间。使... 查看详情

android动画（帧动画补间动画属性动画）讲解(代码片段)

Android动画（帧动画、补间动画、属性动画）讲解首先我们来看看啥是帧动画、补间动画、属性动画。介绍：帧动画：是一种常见的动画形式（FrameByFrame），其原理是在“连续的关键帧”中分解动画动作... 查看详情

js如何做动画效果

参考技术Ajs如何做动画效果直接用jquery，网上有很多开源代码，容易上手。ps如何做动画效果通过:窗口-动画，调处动画面板，剩下的就和flash一样了不过ps的功能要少很多窗口——时间轴——然后选择你的图片——在设置时间—... 查看详情

帧动画插件(代码片段)

动画插件封装最近这段时间一直都在研究关于动画方法的知识，说实话确实不容易，主要还是动画算法这方面比较难，毕竟没学过。当然也有所收获，明白了基本动画的原理是什么，所以自己也封装了一个简单的动画插件来巩固... 查看详情