5.6 CSS3 animation动画

lanzhusiyu 2020-02-23

1、@keyframes 定义关键帧动画
2、animation-name 动画名称
3、animation-duration 动画时间
4、animation-timing-function 动画曲线

  • linear 匀速
  • ease 开始和结束慢速
  • ease-in 开始是慢速
  • ease-out 结束时慢速
  • ease-in-out 开始和结束时慢速
  • steps 动画步数

5、animation-delay 动画延迟
6、animation-iteration-count 动画播放次数 n|infinite
7、animation-direction

  • normal 默认动画结束不返回
  • Alternate 动画结束后返回

8、animation-play-state 动画状态

  • paused 停止
  • running 运动

9、animation-fill-mode 动画前后的状态

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

10、animation:name duration timing-function delay iteration-count direction;同时设置多个属性

举例：（人物走路动画）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>走路动画</title>
    <style type="text/css">        
        .box{
            width:120px;
            height:180px;
            border:1px solid #ccc;            
            margin:50px auto 0;
            position:relative;
            overflow:hidden;            
        }

        .box img{
            display:block;
            width:960px;
            height:182px;
            position: absolute;
            left:0;
            top:0;
            animation:walking 1.0s steps(8) infinite;            
        }
        @keyframes walking{
            from{
                left:0px;
            }

            to{
                left:-960px;
            }
        }
    </style>
</head>
<body>
    <div class="box"><img src="images/walking.png"></div>
</body>
</html>

动画中使用的图片如下：

5.6 CSS3 animation动画

lanzhusiyu

lanzhusiyu

相关推荐

纯CSS实现放烟花效果

// 40upx -30upx 0 #FF7F50, 70upx -10upx 0 #00FFFF, 130upx -20upx 0 #9932CC, 230upx 0 0 #00FFFF,//

沈宫新 / 0评论 2020-06-11

CSS-动画animation

动画可以通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

sdbxpjzq / 0评论 2020-04-21

css动画 animation

animation-name:textgo;(动画名)animation-duration:3s;animation-timing-function:速度曲线// animation-iteration-count:动画次数//animation-dire

冰蝶 / 0评论 2020-04-20

css3动画添加间隔

因项目需要，需要在元素上实现动画效果，并且需要有动画间隔。坑爹的是animation-delay只有在第一次动画开始的时候才起效。// item解释：这是个包含组件的style信息的对象，属性就是style的各个属性，里面还有一个id，id就是我要设置的组

vavid / 0评论 2020-04-20

css3动画属性-animation

　　　　CSS动画简单说就是在一段固定的动画时间内暗中在某一频率内改变其CSS某个或某些值,从而达到视觉上的转换动画效果。Animations的很多方面都是可以控制的，包括动画运行时间，开始值和结束值，还有动画的暂停和延迟其开始时间等。　　　　所有动画属性

aSuncat / 0评论 2020-03-01

炫酷的字体效果

<!DOCTYPE html>. padding: 0;margin: 0;width: 100vh;height: 100vh;display: flex;justify-content: center;align-items: center

ShylaDong / 0评论 2020-02-25

android 动画基础绘——view 动画(二)[补]

回顾第一篇关于view 动画的，我介绍到view的动画都是针对元素本身的。当我们开发view动画的时候，我们看到几个元素在做相同规律的变化，如果我们去一个个设置的话，当然是可以的，但是呢一个代码不美观。同样我们看到，我们进入下一个页面的时候，那么有一个切换

csdnuuu / 0评论 2020-02-14

css基础面试题

页面被加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载。link是html标签，因此没有兼容性，而@import只有IE5以上才能识别。align-self：允许单个项目与其他项目不一样的对齐方式，可以覆盖align-it

wangjie / 0评论 2020-02-12

CSS3(4)---动画(animation)

过渡 只能指定属性的 开始值 与 结束值，然后在这两个属性值之间进行平滑过渡来实现动画效果，因此只能实现简单的动画效果。animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;animation-timing-functio

CaiKanXP / 0评论 2020-01-12

python isinstance函数（21）

isinstance() 函数是python中的一个内置函数，主要用于检测变量类型，返回值是bool值 ，在python内置函数中，与该函数相似的还有另外一个内置函数 type()。classinfo :可以是直接或者间接类名、基本类型或者由它们组成的元组

wangqing / 0评论 2019-12-28

CSS3(4)---动画(animation)

过渡 只能指定属性的 开始值 与 结束值，然后在这两个属性值之间进行平滑过渡来实现动画效果，因此只能实现简单的动画效果。animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;animation-timing-functio

lanzhusiyu / 0评论 2020-01-05

CSS动画Animation

之前说的过渡也是属于动画的范围，只不过它只能是开始到过渡这两个点，中间由浏览器去完成，而动画允许开发者一帧一帧的去编码。from就是之前的状态，to是之后的状态，嗯，这个其实和过渡没啥区别，这是第一种写法。animation: name duration

zengni / 0评论 2019-12-25

css动画

使用css实现动画有两种方式，animation和transition。transition-property规定设置过渡效果的 CSS 属性的名称transition-duration规定完成过渡效果需要多少秒或毫秒transition-timing-f

waterv / 0评论 2019-12-10

css3动画系列之animation 属性

animation与@keyframes同时使用才可起作用,这里详细介绍下animation的所有用法：。规定需要绑定到选择器的 keyframe 的名称。默认值是 0，意味着没有动画效果。animation-timing-function 规定动画的速度

我就是停不下来 / 0评论 2014-01-16

css3动画系列之@keyframes规则

html5+css3出现以后，很多优秀的动画效果因为个别主流浏览器不支持的原因，被使用的很少，现在很多做微营销的公司，很多产品是在微信里浏览和使用，微信默认浏览器支持的都是webkit内核，所有很多css3的特性都是支持的，可以大胆使用，尤其是一些动画样式

sorryericsson / 0评论 2014-01-16

CSS3新特性之animation(纯CSS实现轮播图)

---->是为了消除每个li换行所带来的间距问题

切慕溪水 / 0评论 2019-11-17

Android中xml设置Animation动画效果详解

在Android中，Animation动画效果的实现可以通过两种方式进行实现，一种是tweened animation渐变动画，另一种是frame by frame animation画面转换动画。在res文件夹下新建一个anim的文件夹，并在其中建立一个

GoAheadY / 0评论 2011-04-11

html5 canvas结合js实现的非常酷的ascii animation动画特效

原文：html5 canvas结合js实现的非常酷的ascii animation动画特效

风火一回一生不毁 / 0评论 2014-05-29

Android Animation的XML的编写

先在项目的res下创建一个anim文件夹。

doomvsjing / 0评论 2011-07-29

CSS3 animation动画与transition过渡比较

动画以低速开始，然后加快，在结束前变慢。动画以低速结束。可能的值是从 0 到 1 的数值。animation动画比transition过渡多了下面的属性。动画应该正常播放。alternate:动画先正后反播放。animation-fill-mode : n

somboy / 0评论 2019-11-06

web前端入门到实战：彻底掌握css动画【animation】

马上就2020年了，不知道小伙伴们今年学习了css3动画了吗？上一篇文章我们已经一起学习了transition 的使用，如果有不了解的同学可以查看我的上一篇文章。话不多说，马上和我一起去学习今天的主角animation吧！检索或设置对象所应用的动画名称 ,

sdbxpjzq / 0评论 2019-11-03

css3实现轮播1

图片轮播，鼠标移入后轮播暂停，移除后轮播继续。利用Css3animation动画属性，用transform 实现图片移动。通过图片复制备份，实现的图片的无缝衔接。Safari 和 Chrome 支持 @-webkit-keyframes 规则。动画持续时间

jiedinghui / 0评论 2019-10-28

前端深入之css篇丨2020年前，彻底掌握css动画【animation】

马上就2020年了，不知道小伙伴们今年学习了css3动画了吗？上一篇文章我们已经一起学习了transition的使用，如果有不了解的同学可以查看我的上一篇文章。话不多说，马上和我一起去学习今天的主角animation吧！检索或设置对象所应用的动画名称 ,必

CaiKanXP / 0评论 2019-10-25

前端深入之css篇丨初探【transform】，手把手带你实现1024程序员节动画

马上就2020年了，不知道小伙伴们今年学习了css3动画了吗？值此1024程序员佳节之际，我特此推出供同学们学习的动画小案例，这个案例非常简单，但是他可有帮我们巩固上一篇学的animation，并且能够让你对后面要学习的animation有一个基本的认识。

MaureenChen / 0评论 2019-10-25

css中animation和@keyframes 动画

-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */. Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。Safari 和 Chro

lcyangcss / 0评论 2019-10-22

CSS3 Animation：background-image

对CSS3的强大一如既往的自信，自己在倒腾一个用例，就是一朵白云的两个表情切换，想想很容易实现吧，在PC上也是如此，用两个keyframes就搞定了。

css教程 / 0评论 2015-04-07

Android图形动画 使用ScaleAnimation

使用ScaleAnimation实现了一个类似于翻转的动画效果。感觉ScaleAnimation算是一个比较好用的动画类了，看了一下API感觉方法和构造方法也都很简单。准备两张照片，放置在res/drawble下。首先在layout中写好布局文件，这里要用

javashu0 / 0评论 2015-10-29

纯CSS仿windows系统loading效果

今天分享的css3案例模仿了window系统下的loading效果里面最关键的地方使用了css3 animation的delay属性以及贝塞尔曲线的过渡效果，如下所示

icewizardry / 0评论 2016-12-20

css动画实现呼吸圆

<!DOCTYPE html><html lang="en"><head>. width: 300px;height: 400px;background-color: #333;margin: 0 a

lcyangcss / 0评论 2019-09-07

WebGL 动画

有一种动画书，就是快速翻动就可以看见里面的内容运动起来了。电脑动画和这个差不多，通过在动画区域内用一张新的图片代替旧的图片，并快速持续的改变，根据视觉暂留现象就在我们的大脑中形成了动画。我们先用代码把第一段话翻译一下吧：。首先，我们通过init方法绑定到b

TWaver可视化 / 0评论 2017-09-14

Android开发：Animation的巧妙使用

为了给UI做出一些比较炫的效果，往往要使用多种Animation结合使用或者是多个控件同时使用一种Animation。而后者需要按照一定规律来使用，下面是具体实例：。和这个不同的就是重新定义了几个anim文件夹下的xml文件：。其余的就是在startOff

老菜鸟自习室 / 0评论 2012-02-25

Android 自定义Button 及Animation的基本使用

在Android开发中常用组件的使用是必不可少的，但是常用组件用来用去也就那么几种，满足不了开发者对应用界面的要求，更满足不了消费者对商业应用美观，大方，时尚的要求，所以说学会自定义各种组件十分必要。本例简单的自定义了一个Button并结合了四个简单ani

满城风絮 / 0评论 2012-02-25

CSS实现小球跳动效果

animation-duration: 1s;animation-duration: .75s;animation-duration: .25s;top: 100%;height: 50%;width: 50%;background-color: #fff

yongquanx / 0评论 2018-02-17

微信小程序自定义toast组件的方法详解【含动画】

本文实例讲述了微信小程序自定义toast组件的方法。分享给大家供大家参考，具体如下：

dmguying / 0评论 2019-05-11

通过css3动画和opacity透明度实现呼吸灯效果

<!DOCTYPE html><html lang="en"><head>. background-color: black;margin: 0 auto;margin-top: 200px;widt

zhanghaibing00 / 0评论 2019-08-16

Flutter 使用动画播放一组图片

final double w;final double h;final int durationSeconds;return _InState();Animation<int> _animation;super.initState();..re

apowerfulman / 0评论 2019-07-01

css animation 常用的动画效果

最近项目需要，需要写一些动画效果，然后对animation的知识巩固了一下。animationanimation-name 需要绑定到选择器的 keyframe 名称animation-duration 完成动画所需要的时间animation-

CoderChang / 0评论 2019-07-01

css3元素出现动画实例

css3中实现动画一般有两种方式，一个是transition过渡，一个是animation动画。最主要区别就是transition需要条件触发，通常会用hover来触发，而animation则更灵活，可以自动播放，也可以通过条件触发。}这样就实现了一个“从

魄竹 / 0评论 2019-07-01

用 CSS3 动画功能，做一个有逼格的加载动画

</div>说明： loading-1/2/3/4 用于区别四个不同点，loading-item 里放通用样式

我就是停不下来 / 0评论 2019-07-01

CSS3动画之逐帧动画

什么是逐帧动画要了解 CSS3 逐帧动画，首先要明确什么是逐帧动画。定格动画，又名逐帧动画，是一种动画技术，其原理即将每帧不同的图像连续播放，从而产生动画效果。简而言之，实现逐帧动画需要两个条件：相关联的不同图像，即动画帧；连续播放。第一个参数指定了函数中

qiupu / 0评论 2019-07-01

CSS3动画之逐帧动画

什么是逐帧动画要了解 CSS3 逐帧动画，首先要明确什么是逐帧动画。定格动画，又名逐帧动画，是一种动画技术，其原理即将每帧不同的图像连续播放，从而产生动画效果。简而言之，实现逐帧动画需要两个条件：相关联的不同图像，即动画帧；连续播放。第一个参数指定了函数中

LadyZhong / 0评论 2019-07-01

CSS html大杂烩

css属性：阴影 box-shadow：>=ie9html： pacleholder >ie9 //can i use 里显示ie10不支持，但实践验证已支持css属性 转换 transform >= ie9. 注意： Internet

tianzyc / 0评论 2019-07-01

svg animation应用之-描边效果

stroke-width 表示描边的粗细stroke-linejoin 表示描边转角的表现方式 miter, round, bevel, inherit. stroke-dasharray 表示虚线描边stroke-dashoffset 表示虚线的起始偏移

wallowyou / 0评论 2019-06-30

svg animation动画应用

最近在做首页动画的时候，引入有背景色的mp4动图时，动图的背景色不能很好的融入相同背景色的不同浏览器和不同显示器，出现了下图这种尴尬的情况：。动图的边界始终有根分界线，即使调整了背景色适应这个边界，也总是会在不同的显示器中显示出不同程度的分界线。于是我决定

hermanncain / 0评论 2019-06-30

css3动画transition && animation

transition-property：指定哪个或哪些 CSS 属性用于过渡transition-duration：指定过渡的时长。或者为所有属性指定一个值，或者指定多个值，为每个属性指定不同的时长transition-timing-function：指定

尚衍亮 / 0评论 2019-06-30

10分钟入门 CSS3 Animation

简介Animation可以让你不用依赖javascript或jquery，用纯CSS在网页中轻松实现各种动画效果。兼容性animation在绝大部分主流浏览器都得到了很好的支持！还在兼容IE9的同学要谨慎使用。CSS 坐标系在了解animtion之前，我们

武林半侠 / 0评论 2019-06-30

【CSS】一文读懂 Animation 中的时间函数 steps

利用 CSS3 的 Animation 可以创建动画，在许多页面中能够替代 Flash、JS 等，提升页面加载速度。众所周知，Animation 有 8 大属性，如下所述：。本文主要介绍 timing-function中的steps()函数。Animati

张大晴 / 0评论 2019-06-29

两种方案开发小程序动画

在普通的网页开发中，动画效果可以通过css3来实现大部分需求，在小程序开发中同样可以使用css3，同时也可以通过api方式来实现。这个对象通过wx.createAnimation返回,animation的一系列属性都基于这个实例对象。添加动效实例创建完成之

stdjkdblom / 0评论 2019-06-28

css 各种浏览器兼容前缀写法

4、对于一些属性：border-radius,linear-gradient,和box-shadow,你可以使用CSS3Pie，它是一个很小的文件，把它放到你的网站的根目录下，就能让你的页面中IE6，IE8中也支持这些属性。

阴慧超 / 0评论 2018-07-18