CSS3 animation 属性

实例

使用简写属性,将动画与 div 元素绑定:

div
{
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}

亲自试一试

浏览器支持

IE Firefox Chrome Safari Opera
         

Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。

Safari 和 Chrome 支持替代的 -webkit-animation 属性。

注释:Internet Explorer 9 以及更早的版本不支持 animation 属性。

定义和用法

animation 属性是一个简写属性,用于设置六个动画属性:

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction

注释:请始终规定 animation-duration 属性,否则时长为 0,就不会播放动画了。

默认值: none 0 ease 0 1 normal
继承性: no
版本: CSS3
JavaScript 语法: object.style.animation="mymove 5s infinite"

语法

animation: name duration timing-function delay iteration-count direction;
描述
animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。

相关页面

CSS3 教程:CSS3 动画

animation实现动画效果的更多相关文章

  1. css3 使用animation实现动画效果

    .rotation { -webkit-animation-name: rotation; -webkit-animation-duration: 30s; -moz-animation-name: ...

  2. 为listview的item添加动画效果

    //动画集合 AnimationSet animationSet = new AnimationSet(true); //alpha动画 Animation animation = new Alpha ...

  3. 第 26 章 CSS3 动画效果

    学习要点: 1.动画简介 2.属性详解 3.简写和版本 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 的动画效果,可以通过类似 Flash 那样的关键帧模式控制运行. 一.动画简介 CSS ...

  4. 第八十三节,CSS3动画效果

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

  5. css3中的动画效果

    css3中的animation属性动画效果代码如下: <!DOCTYPE html> <html lang="en"> <head> <m ...

  6. iOS - Core Animation 核心动画

    1.UIView 动画 具体讲解见 iOS - UIView 动画 2.UIImageView 动画 具体讲解见 iOS - UIImageView 动画 3.CADisplayLink 定时器 具体 ...

  7. Android动画效果之Property Animation进阶(属性动画)

    前言: 前面初步认识了Android的Property Animation(属性动画)Android动画效果之初识Property Animation(属性动画)(三),并且利用属性动画简单了补间动画 ...

  8. Android动画效果之初识Property Animation(属性动画)

    前言: 前面两篇介绍了Android的Tween Animation(补间动画) Android动画效果之Tween Animation(补间动画).Frame Animation(逐帧动画)Andr ...

  9. Android动画效果之Frame Animation(逐帧动画)

    前言: 上一篇介绍了Android的Tween Animation(补间动画) Android动画效果之Tween Animation(补间动画),今天来总结下Android的另外一种动画Frame ...

随机推荐

  1. Nginx反向代理和负载均衡的配置

    1.反向代理配置 反向代理也称"动静分离",nginx不自己处理图片的相关请求,而是把图片的请求转发给其他服务器来处理. 修改nginx部署目录下conf子目录的nginx.con ...

  2. IOS开发之数据sqlite使用

    一.引入工具包 引入工具包libsqlite3.dylib,该工具包为C语言工具包. 二.代码操作数据库 1.创建并且链接数据库 - (void) _connectDB{ //1>获取沙盒路径作 ...

  3. PostgreSQL存储过程(3)-流程控制语句

    流程控制 讲解条件语句,循环语句. 本次环境会用到表emp:下面是emp执行语句. drop table emp; create table EMP( EMPNO numeric() not null ...

  4. 开发流程和Maven的配置

    按照何种开发模型? V模型:项目需求--->概要设计(功能模块) --->详细设计(页面的设计,数据库的设计) --->编码(框架的搭建,功能的实现)---->测试(单元测试, ...

  5. windows转储文件(dmp)

    1. 何为转储文件      转储文件也就是我们常说的dump文件.可以把转储文件看成软件的某个时刻的一个快照.转储文件一般都是在软件出现问题时手动生成或者程序自动生成.下面我们介绍几种生成转储文件的 ...

  6. VMware Workstation 12 Pro 之安装林耐斯-LinuxMint-系统

    VMware Workstation 12 Pro 之安装林耐斯-LinuxMint-系统... ---------------------- ---------------------------- ...

  7. Java中的方法

    Java方法/函数 方法的定义: Java方法是语句的集合,他们在一起执行一个功能. 方法是解决一类问题的步骤的有序组合 方法包含于类或对象中 方法在程序中被创建,在其他地方被引用 方法的优点 使程序 ...

  8. 再起航,我的学习笔记之JavaScript设计模式14(桥接模式)

    桥接模式 桥接模式(Bridge): 在系统沿着多个维度变化的同时,又不增加其复杂度并已达到解耦 从定义上看桥接模式的定义十分难以理解,那么我们来通过示例来演示什么是桥接模式. 现在我们需要做一个导航 ...

  9. 利用CoreAnimation实现一个时间的进度条

    (个人原创,转载请注明出处 http://www.cnblogs.com/pretty-guy/p/7460334.html) 在iOS中实现进度条通常都是通过不停的设置progress来完成的,这样 ...

  10. c++中find函数的用法

    find函数主要实现的是在容器内查找指定的元素,并且这个元素必须是基本数据类型的.查找成功返回一个指向指定元素的迭代器,即元素在容器中的下标,查找失败返回end迭代器. 头文件 #include &l ...