CSS3 animation动画

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="data:images/walking.png"></div>

</body>

</html>

动画中使用的图片如下：

CSS3 animation动画的更多相关文章

  1. css3 animation动画特效插件的巧用

    这一个是css3  animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...

  2. css3 animation动画技巧

    一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...

  3. CSS3 animation 动画

    今天看到一个很酷的logo看了下他用的是animation 动画效果,就拿来做例子 浏览器支持 Internet Explorer 10.Firefox 以及 Opera 支持 animation 属 ...

  4. css3 animation(动画)笔记

    在开始介绍Animation之前我们有必要先来了解一个特殊的东西,那就是"Keyframes",我们把他叫做“关键帧”,玩过flash的朋友可能对这个东西并不会陌生.下面我们就一起 ...

  5. css3 animation 动画属性简介

    animation 动画属性介绍 animation 属性是一个简写属性,用于设置动画属性: 1. animation-name----规定需要绑定到选择器的 keyframe 名称. 语法:anim ...

  6. css3 animation动画事件

    当使用css3时,会遇到利用@keyframes来定义动画事件,利用以下3个事件,能够捕捉当前元素的动画: AnimationEnd //动画结束时 AnimationStart  //动画開始 An ...

  7. CSS3 animation动画，循环间的延时执行时间

    如下代码,其中的delay值为3s,但是animation按现在的规则,这个delay是指动画开始前的延时,在动画循环执行间,这个delay是不生效的. .item{ webkit-animation ...

  8. css3 animation动画使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 关于css3 Animation动画

    在介绍animation之前有必要先来了解一个东西,那就是“keyframes”,我们把他叫做“关键帧”: 在使用transition制作一个简单的transition效果时,包括了初始属性,最终属性 ...

随机推荐

  1. CSS3 3D 转换

    CSS3 允许您使用 3D 转换来对元素进行格式化. 在本章中,您将学到其中的一些 3D 转换方法: rotateX() rotateY() rotateX() 方法 rotateX()方法,围绕其在 ...

  2. 上传代码到github上

    初始化 git init 添加远程仓库 git remote add origin[仓库名] 仓库地址 添加文件 git add . 本地提交 git commit -m 'message' 拉去远程 ...

  3. 【bzoj3289】mato的文件管理

    首先允许离线,一眼莫队…… 然后考虑对于每次移动,这不就是让你求逆序对嘛(QAQ) 考虑怎么移动? 每次在最后添加一个数,比这个数大的数都会与其形成一个逆序对 每次在最后移除一个数,比这个数大的数都会 ...

  4. 【python】正则表达式相关

    注意:Python3.X 的print要有括号, Python 2.x的不需要 放上学习时写的例子: import re m = re.match(r'(\w+) (\w+)(?P<sign&g ...

  5. python常用内置函数整理

    1.最常见的内置函数是print print("Hello World!") 2.数学运算 abs(-5) # 取绝对值,也就是5 round(2.6) # 四舍五入取整,也就是3 ...

  6. Vmware esxi开启snmp服务

    https://jingyan.baidu.com/article/9f7e7ec055c4c86f28155435.html http://pubs.vmware.com/vsphere-50/in ...

  7. magento smtp设置

    我安装的版本是ASchroder_SMTPPro-2.0.6.tgz 然后测试 但是没成功,会有报错,报错: 提示没有默认模板,原因是该插件没有带模板,所有会有这样的提示.

  8. 【转】appium常用方法整理

    1.相对坐标解锁九宫格 应用场景 QQ解锁屏幕如上,可见九个按键在同一个View下面,要实现解锁,用press   moveTo  release  perform方法 实现代码如下: WebElem ...

  9. uva658（最短路径+隐式图+状态压缩）

    题目连接(vj):https://vjudge.net/problem/UVA-658 题意:补丁在修正 bug 时,有时也会引入新的 bug.假定有 n(n≤20)个潜在 bug 和 m(m≤100 ...

  10. luogu P1938找工就业

    一头牛在一个城市最多只能赚D元,然后它必须到另一个城市工作.当然它可以在别处工作一阵子后,又回到原来的城市再最多赚D美元.而且这样的往返次数没有限制城市间有P条单向路径,共有C座城市,编号1~C,奶牛 ...