文档章节

第十九章 CSS 3中的动画功能 - 《HTML 5与CSS 3权威指南》

产品哥
 产品哥
发布于 2012/02/14 20:24
字数 431
阅读 204
收藏 0

在CSS 3中,增加了2种动画功能:

  1. Transitions从一个属性值平滑过渡到另一个属性值。
  2. Animations支持通过关键帧的指定在页面上产生更复杂的动画效果。

本章我的代码全部是再FireFox 9下载编写,所有都是使用的 -moz-XXX。如果你使用的是Opera,请使用-o-XXX; 如果你使用的是Google\Apple浏览器,请使用-webkit-XXX。

Transitions

transitions属性的使用方法

transitions: property duration timing-function

property表示哪个属性进行平滑过渡,duration表示在多长时间内完成属性值的平滑过渡,timing-function表示通过什么方法来进行平滑过渡。

<!DOCTYPE html>
<html>
	<head>
		<title>HTML 5与CSS 3权威指南 - 第十九章 CSS 3中的动画功能</title>
		<style type="text/css">
		img{
			position: absolute;
			top 7px;
			left:0;
			background-color:#ffff00;
			-moz-transform: rotate(0deg);
			-moz-transitions:background-color 2s linear, -moz-transform 1s linear;
		}
		div:hover img{
			position: absolute;
			left: 30px;
			background-color:#00ffff;
			-moz-transform: rotate(720deg);
		}
		</style>
	</head>
	<body>
		<div>Transitions属性测试DIV <img src="01.jpg" alt=" *" width="300px" /></div>
		<footer>代码出自开源中国社区:<a href="http://my.oschina.net/TOW">Andy.Zhou</a></footer>
	</body>
</html>

本例子主要是实现图片的平滑偏移极其旋转720度的效果。

transitions功能实现动画有个缺点是只能指定属性的开始值和结束值,在这两个值之间平滑过渡,所以就有了Animations。

Animations

 animations与transitions功能相同,都是通过元素的属性值来实现动画的,区别在于animations通过定义多关键帧以及定义每个关键帧的属性值来实现更为复杂的动画。<未完待续,草稿保存时间太长了>

© 著作权归作者所有

产品哥
粉丝 80
博文 167
码字总数 191806
作品 1
杭州
CTO(技术副总裁)
私信 提问
掌握这11项技能,你就是优秀的前端开发工程师

导读: 你也许会觉得前端开发是一个很简单的工作,对呀,你就是刚刚从网页设计转型过来的。但当你深入其中时,一定会发现好像前端开发不是那么简单,光网站性能优化、响应式、框架就让你焦头...

半饱即好
2018/06/26
0
0
微信应用号开发必备技能都在这里了啦!

“微信应用号”就像平地里炸响的一声春雷,在互联网圈内炸开了锅,小代码小程序即将成为主流,H5迎来了自己的第二春。废话少说,关于微信应用号开发技能,你都掌握了吗? 没掌握的看这里,干...

咖啡
2016/09/23
0
0
掌握11项技能,你就是优秀的前端开发工程师

导读: 你也许会觉得前端开发是一个很简单的工作,对呀,你就是刚刚从网页设计转型过来的。但当你深入其中时,一定会发现好像前端开发不是那么简单,光网站性能优化、响应式、框架就让你焦头...

半饱即好
2014/05/14
0
25
《HTML+CSS3权威指南》笔记摘要 - 目录

主要是想借助这个平台让大家给我学习途中的错误和不好的地方给与纠正。 我会努力最短时间内完成更新,如果发现有错别字或者Code错误,请指出。 信息:建议使用Opera10以上或者Google浏览器测...

产品哥
2011/12/02
0
1
给前端开发者的 20 款实用文档和指南

又到了该学习的时候了!之前,我已经收集了许多不同的学习资源,包括教程,文档,和其他一些有用的网站,这些资源可以用来帮助你快速掌握前端开发的不同技术。 1. CSS 取模查询和范围选择器 ...

oschina
2016/11/21
5.8K
13

没有更多内容

加载失败,请刷新页面

加载更多

IPv4如何转换为IPv6?

导读 ipv6已经逐渐在应用,现在已经有很多的运营商支持ipv6,前天我们也发布了如何让电脑使用ipv6地址?有很多朋友在问?ipv6有什么作用,它的表示方式是什么,今天我们来一起来详细了解下ipv...

问题终结者
12分钟前
1
0
SpringBoot2.0高级案例(05):整合 Swagger2 ,构建接口管理界面

一、Swagger2简介 1、Swagger2优点 整合到Spring Boot中,构建强大RESTful API文档。省去接口文档管理工作,修改代码,自动更新,Swagger2也提供了强大的页面测试功能来调试RESTful API。 2、...

知了一笑
24分钟前
4
0
关于观察者模式总结

观察者模式(发布订阅模式):在对象之间定义一对多的依赖,这样一来,当一个对象改变状态,依赖他的对象都会收到通知,并自动更新。 使用场景:当一个对象状态改变同时需要改变其他对象,且...

cherryboy
30分钟前
1
0
Gradle Sync太慢?你需要使用阿里云仓库服务的代理仓库地址代替jcenter()、maven

在天朝使用jcenter、mavenCentral及google三个远程仓库,Gradle Sync会很慢,goole仓库甚至需要科学上网才能访问。为了加快Gradle Sync速度,一招教你优先用 阿里云仓库服务 的仓库作为下载源...

丁佳辉
43分钟前
2
0
maven打包后运行提示“没有主清单属性”的解决办法

在项目的pom.xml文件里添加如下内容: <build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>m......

shatian
45分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部