animation实现动画效果
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实现动画效果的更多相关文章
- css3 使用animation实现动画效果
.rotation { -webkit-animation-name: rotation; -webkit-animation-duration: 30s; -moz-animation-name: ...
- 为listview的item添加动画效果
//动画集合 AnimationSet animationSet = new AnimationSet(true); //alpha动画 Animation animation = new Alpha ...
- 第 26 章 CSS3 动画效果
学习要点: 1.动画简介 2.属性详解 3.简写和版本 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 的动画效果,可以通过类似 Flash 那样的关键帧模式控制运行. 一.动画简介 CSS ...
- 第八十三节,CSS3动画效果
CSS3动画效果 学习要点: 1.动画简介 2.属性详解 3.简写和版本 本章主要探讨HTML5中CSS3的动画效果,可以通过类 Flash那样的关键帧模式控制运行. 一.动画简介 CSS3提 ...
- css3中的动画效果
css3中的animation属性动画效果代码如下: <!DOCTYPE html> <html lang="en"> <head> <m ...
- iOS - Core Animation 核心动画
1.UIView 动画 具体讲解见 iOS - UIView 动画 2.UIImageView 动画 具体讲解见 iOS - UIImageView 动画 3.CADisplayLink 定时器 具体 ...
- Android动画效果之Property Animation进阶(属性动画)
前言: 前面初步认识了Android的Property Animation(属性动画)Android动画效果之初识Property Animation(属性动画)(三),并且利用属性动画简单了补间动画 ...
- Android动画效果之初识Property Animation(属性动画)
前言: 前面两篇介绍了Android的Tween Animation(补间动画) Android动画效果之Tween Animation(补间动画).Frame Animation(逐帧动画)Andr ...
- Android动画效果之Frame Animation(逐帧动画)
前言: 上一篇介绍了Android的Tween Animation(补间动画) Android动画效果之Tween Animation(补间动画),今天来总结下Android的另外一种动画Frame ...
随机推荐
- Nginx反向代理和负载均衡的配置
1.反向代理配置 反向代理也称"动静分离",nginx不自己处理图片的相关请求,而是把图片的请求转发给其他服务器来处理. 修改nginx部署目录下conf子目录的nginx.con ...
- IOS开发之数据sqlite使用
一.引入工具包 引入工具包libsqlite3.dylib,该工具包为C语言工具包. 二.代码操作数据库 1.创建并且链接数据库 - (void) _connectDB{ //1>获取沙盒路径作 ...
- PostgreSQL存储过程(3)-流程控制语句
流程控制 讲解条件语句,循环语句. 本次环境会用到表emp:下面是emp执行语句. drop table emp; create table EMP( EMPNO numeric() not null ...
- 开发流程和Maven的配置
按照何种开发模型? V模型:项目需求--->概要设计(功能模块) --->详细设计(页面的设计,数据库的设计) --->编码(框架的搭建,功能的实现)---->测试(单元测试, ...
- windows转储文件(dmp)
1. 何为转储文件 转储文件也就是我们常说的dump文件.可以把转储文件看成软件的某个时刻的一个快照.转储文件一般都是在软件出现问题时手动生成或者程序自动生成.下面我们介绍几种生成转储文件的 ...
- VMware Workstation 12 Pro 之安装林耐斯-LinuxMint-系统
VMware Workstation 12 Pro 之安装林耐斯-LinuxMint-系统... ---------------------- ---------------------------- ...
- Java中的方法
Java方法/函数 方法的定义: Java方法是语句的集合,他们在一起执行一个功能. 方法是解决一类问题的步骤的有序组合 方法包含于类或对象中 方法在程序中被创建,在其他地方被引用 方法的优点 使程序 ...
- 再起航,我的学习笔记之JavaScript设计模式14(桥接模式)
桥接模式 桥接模式(Bridge): 在系统沿着多个维度变化的同时,又不增加其复杂度并已达到解耦 从定义上看桥接模式的定义十分难以理解,那么我们来通过示例来演示什么是桥接模式. 现在我们需要做一个导航 ...
- 利用CoreAnimation实现一个时间的进度条
(个人原创,转载请注明出处 http://www.cnblogs.com/pretty-guy/p/7460334.html) 在iOS中实现进度条通常都是通过不停的设置progress来完成的,这样 ...
- c++中find函数的用法
find函数主要实现的是在容器内查找指定的元素,并且这个元素必须是基本数据类型的.查找成功返回一个指向指定元素的迭代器,即元素在容器中的下标,查找失败返回end迭代器. 头文件 #include &l ...