css3-动画（animation）：

具有以下属性：

1、animation-name 自定义动画名称
2、animation-duration 动画指定需要多少秒或毫秒完成，默认值是0;
3、animation-timing-function 动画的时间曲线，linear 匀速， ease 先慢后快，结束前变慢 。
4、animation-delay 动画在启动前的延迟间隔，默认是0
5、animation-iteration-count 动画的播放次数，默认是1
6、animation-direction 是否轮流反向播放动画
7、animation-play-state 动画是否正在运行或已暂停。 值：paused 指定暂停动画 ； running 指定正在运行的动画，默认。

实例：本demo以平移（translate）为例说明动画的整个过程

html:

<body>

		<div class="warp">

		</div>

</body>

css:

.warp{

	    height: 100px;

	     width: 100px;

	     border: 1px solid #eee;

            animation-name:moves;

            animation-direction:alternate;

            animation-delay: 0.2s;

            animation-duration: 5s;

            animation-play-state: paused;

            animation-iteration-count: 3;

           /*以上可以简写成：*/

           animation: moves 5s linear 0.2s 3;

}

@keyframes moves{                           /*动画名称自定义*/

	10%{                                    /*时间点可以任意，10%表示当时间进行到10%是元素要达到的状态*/

		transform: translate(100px,0);

		-ms-transform:translate(100px,0);	 /*IE 9*/

		-moz-transform:translate(100px,0); 	/* Firefox */

		-webkit-transform:translate(100px,0); /* Safari 和 Chrome */

		-o-transform:translate(100px,0); 	/* Opera */

	}

	30%{                                    /*时间点可以任意*/

		transform: translate(100px,100px);

		-ms-transform:translate(100px,100px);	 /*IE 9*/

		-moz-transform:translate(100px,100px); 	/* Firefox */

		-webkit-transform:translate(100px,100px); /* Safari 和 Chrome */

		-o-transform:translate(100px,100px); 	/* Opera */

	}

	60%{                                       /*时间点可以任意*/

		transform: translate(0,100px);

		-ms-transform:translate(0,100px);	 /*IE 9*/

		-moz-transform:translate(0,100px); 	/* Firefox */

		-webkit-transform:translate(0,100px); /* Safari 和 Chrome */

		-o-transform:translate(0,100px); 	/* Opera */

	}

	100%{                                /*时间点可以任意*/

		transform: translate(0,0);

		-ms-transform:translate(0,0);	 /*IE 9*/

		-moz-transform:translate(0,0); 	/* Firefox */

		-webkit-transform:translate(0,0); /* Safari 和 Chrome */

		-o-transform:translate(0,0); 	/* Opera */

	}

}

　　

　　

css3-动画(animation)的更多相关文章

  1. 前端CSS3动画animation用法

    前端CSS3动画animation用法 学习如下动画属性 @keyframes animation-name animation-duration animation-delay animation- ...

  2. CSS3 动画animation

    关键帧 什么是关键帧.一如上面对Flash原理的描述一样,我们知道动画其实由许多静态画面组成,第一个这样的静态画面可以表述为一帧.其中关键帧是在动画过程中体现了物理明显变化的那些帧. 比如之前的例子中 ...

  3. css3 动画(animation)-简单入门

    css3之动画(animation) css3中我们可以使用动画,由于取代以前的gif图片,flash动画,以及部分javascript代码(相信有很多同学都用过jquery中的animate方法来做 ...

  4. CSS3 动画 animation和@keyframes

    CSS3 @keyframes 规则 如需在 CSS3 中创建动画,您需要学习 @keyframes 规则. @keyframes 规则用于创建动画.在 @keyframes 中规定某项 CSS 样式 ...

  5. CSS3动画animation认识，animate.css的使用

    CSS动画 可以取代js动画 在移动端会更加流畅! 下面是一个的绘制太阳系各大行星运行轨迹笔记,可以自学参考! -------------------------------------------- ...

  6. css3动画animation

    动画:animation   animations这物似乎还是只在webkit,moz核心的浏览器上起作用 <!DOCTYPE html><html lang="en&qu ...

  7. CSS3 动画Animation的8大属性

    animation复合属性.检索或设置对象所应用的动画特效. 如果有多个属性值时以","隔开,适用于所有元素,包含伪对象:after和:before 1.animation-nam ...

  8. css3动画-animation

    animation驱使一组css style变化到另外一组css style,它可以定义keyframes的集合,指定style的开始和结束状态,它是transition的增强. 配置animatio ...

  9. CSS3的变形transform、过渡transition、动画animation学习

    学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...

  10. CSS3动画详解(结合实例)

    一.使用CSS3动画代替JS动画 JS动画频繁操作DOM导致效率非常低 在频繁的操作DOM和CSS时,浏览器会不停的执行重排(reflow)和重绘(repaint) 可以避免占用JS主线程 这边就不细 ...

随机推荐

  1. cocos2dx JS 层(Layer)的生命周期

    场景的生命周期: 一般情况下一个场景只需要一个层,需要创建自己的层类.一些主要的游戏逻辑代码都是写在层中的,场景的生命周期是通过层的生命周期反映出来的,通过重写层的生命周期函数,可以处理场景不同声明周 ...

  2. 原生js---ajax的封装插件.js---（对get和post做了兼容）

    function ajax(method,url,data,fn){ // 1.创建对象 var xhr=null; try{ xhr=new XMLHttpRequest(); }catch(e){ ...

  3. 如何使用github来查找自己需要的（关心的）项目

    1.登录github官网 输入用户名密码后会显示下面的界面 2.点击explore git hub 然后你会看到下面的页面 3.下面的或许有你想要的项目 点击Treding 可以查看最近火的项目仓库 ...

  4. caffe的运行create_data.sh前对VOC2007图片格式的更改

    运用caffe进行深度学习之前需要对图片进行预处理,将图片的大小,格式等进行修改 将300*300的图片改为256*256格式 则将以下参数改为: min_dim=256 max_dim=256 wi ...

  5. jQuery选择器--#id、element和.class

       #id 描述 根据给定的ID匹配一个元素.使用任何的元字符作为名称的文本部分, 它必须被两个反斜杠转义:\\ 参数 id  用于搜索的,通过元素的 id 属性中给定的值 element 概述 根 ...

  6. 文件格式(图像 IO 14.3)

    文件格式 图片加载性能取决于加载大图的时间和解压小图时间的权衡.很多苹果的文档都说PNG是iOS所有图片加载的最好格式.但这是极度误导的过时信息了. PNG图片使用的无损压缩算法可以比使用JPEG的图 ...

  7. 【Redis学习之七】Redis持久化

    环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 jdk8 redis-2.8.18 什么是持久化? 将数据从掉电易失的 ...

  8. MyBatis学习笔记(一)——MyBatis快速入门

    转自孤傲苍狼的博客:http://www.cnblogs.com/xdp-gacl/p/4261895.html 一.Mybatis介绍 MyBatis是一个支持普通SQL查询,存储过程和高级映射的优 ...

  9. python小练习：读入一个考试得分，判断这个分数是哪个等级，并输出，考虑异常场景

    读入一个考试得分,判断这个分数是哪个等级,并输出. 等级:>=90 优 ,>=80且小于90 良,>=70 且小于80,中,>=60且<70及格  <60 不及格 ...

  10. 2018年Android面试题含答案--适合中高级

    1.java中==和equals和hashCode的区别  基本数据类型的==比较的值相等. 类的==比较的内存的地址,即是否是同一个对象,在不覆盖equals的情况下,同比较内存地址,原实现也为 = ...