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. <asp:TextBox><asp:LinkButton><input button>调用后台方法后刷新页面

    <asp:TextBox><asp:LinkButton>服务器控件,执行后台方法,会回调加载js,相当于页面重新加载,刷新页面 <input button>不能直 ...

  2. 使用Github官方提供的gitignore过滤Git提交的文件

    https://github.com/github/gitignore 在Gitignore项目主页找到VisualStudio.gitignore 下载后放到自己项目根目录的.vs文件夹提交就可以在 ...

  3. ZJOI2006书架

    追yql做题记录的时候做到的……一道Splay模版题…… 啊LCT写久了都有点忘了Splay了(什么奇怪的逻辑?) 其实说白了五个操作: 1. 将某元素置顶:将元素旋到根,然后将左子树合并到该元素的后 ...

  4. Android之BInder分析

      MediaService的诞生: nt main(int argc, char** argv) { //FT,就这么简单?? //获得一个ProcessState实例 sp<ProcessS ...

  5. Android之进程通信--Binder

    Cilent从ServiceManger哪里获得BnMediaService的BnBinder引用就可以调用BnMediaPlayerService的方法了,BnMediaPlayerService是 ...

  6. [ Python - 3 ] python3.5中不同的读写模式

    r 只能读.r+可读可写,不会创建不存在的文件.如果直接写文件,则从顶部开始写,覆盖之前此位置的内容,如果先读后写,则会在文件最后追加内容.w+ 可读可写 如果文件存在 则覆盖整个文件不存在则创建w ...

  7. 【 LVS 】DR 方式实现过程

    LVS-DR方式实现负载均衡 一.环境介绍

  8. ubuntu下中文输入法安装

    个人认为ubantu下fcitx比sogo好用 安装fcitx首先到ubantu软件中心下载fcitx两个软件,一个是配置软件,一个是输入法软件 到system setting中language su ...

  9. 第一步：Java开发环境的配置

    一.下载JDK 下载地址:www.oracle.com.如下图: 二.配置JDK 安装JDK一直点击下一步就可以,默认是安装在C盘里.如下图: 然后配置系统路径(主要目的是方便开发),参考地址:jin ...

  10. hdu5819

    补多校系列,具体见多校题解http://www.cnblogs.com/duoxiao/p/5777700.html 值得注意的是如果当前i初始向左,前i个骑士最终只有1个向右 对于f[i][1]状态 ...