Notes On <The Definitive Guide to HTML5> - 03

最新推荐文章于 2022-07-22 19:14:00 发布

zlxadhkust

最新推荐文章于 2022-07-22 19:14:00 发布

阅读量465

点赞数

分类专栏： HTML5 Reference Books 文章标签： html5 animation transition actionscript 浏览器 chrome

本文链接：https://blog.csdn.net/zlxadhkust/article/details/7869550

版权

Reference Books 同时被 2 个专栏收录

106 篇文章 1 订阅

订阅专栏

HTML5

10 篇文章 0 订阅

订阅专栏

Chapter 23: Transitions, Animations, and Transforms

这一章介绍的内容在各个浏览器的实现目前并未统一，甚至有些主流浏览器都还不支持。相关的CSS属性在不同浏览器的名称前缀并不相同，比如在Chrome或者Safari里，就是以“-webkit”开头，在Firefox里则是“-moz”。

使用过渡（transition）

所谓过渡，实际上的意思是将一个量化的CSS属性的值在一定时间段内将它由一个值变化到另一个值。与之相关的属性是：

Property	Description	Values
transition-delay	Specifies a delay after which the transition will start.	<time>
transition-duration	Specifies the time span over which the transition will be performed.	<time>
transition-property	Specifies the property that the transition applies to.	<string>
transition-timing-function	Specifies the way that intermediate values are calculated during the transition.

现在看一下它的实际应用，下面代码创建了一个双向的过渡动画：

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<style>
	p {
		padding: 5px;
		border: medium double black;
		background-color: lightgray;
		font-family: sans-serif;
	}
	
	#banana {
		font-size: large;
		border: medium solid black;
		-webkit-transition-delay: 10ms;
		-webkit-transition-duration: 250ms;
	}
	
	#banana:hover {
		font-size: x-large;
		border: medium solid white;
		background-color: green;
		color: white;
		padding: 4px;
		-webkit-transition-delay: 100ms;
		-webkit-transition-property: background-color, color, padding, font-size, border;
		-webkit-transition-duration: 500ms;
	}
</style>
</head>
<body>
	<p>
	There are lots of different kinds of fruit - there are over 500
	varieties of <span id="banana">banana</span> alone. By the time we add the
	countless types of apples, oranges, and other
	well-known fruit, we are faced with thousands of choices.
	</p>
</body>
</html>

当然，要在Chrome里看：

transition-inverse

过渡的公式，这个概念和Actionscript的缓动引擎里使用的一样，只是在CSS3里，属性变化的函数只有五种（ease为默认值）：

easing-function-curves

注意就是，浏览器第一次渲染页面时，是不会套用transition的。

使用动画（animation）

Property	Description	Values
animation-delay	Sets a delay before the animation commences.	<time>
animation-direction	Specifies whether the animation should be played backward on alternate cycles.	normal alternate
animation-duration	Specifies the span of time over which the animation will be performed.	<time>
animation-iteration-count	Specifies the number of times that the animation will infinite be performed.	<number>
animation-name	Specifies the name of the animation.	none <string>
animation-play-state	Allows the animation to be paused and resumed.	running paused
animation-timing-function	Specifies how intermediate animation values are calculated.	ease linear ease-in ease-out ease-in-out cubic-bezier

还是先看一个简单的例子：

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
	<meta name="author" content="Adam Freeman"/>
	<style>
		p {
			padding: 5px;
			border: medium double black;
			background-color: lightgray;
			font-family: sans-serif;
		}
		
		#banana {
			font-size: large;
			border: medium solid black;
		}
		
		#banana:hover {
			-webkit-animation-delay: 100ms;
			-webkit-animation-duration: 500ms;
			-webkit-animation-iteration-count: infinite;
			-webkit-animation-timing-function: linear;
			-webkit-animation-name: 'GrowShrink';
		}
		
		@-webkit-keyframes GrowShrink {
			to {
				font-size: x-large;
				border: medium solid white;
				background-color: green;
				color: white;
				padding: 4px;
			}
		}
	</style>
</head>
<body>
	<p>
		There are lots of different kinds of fruit - there are over 500
		varieties of <span id="banana">banana</span> alone. By the time we add the
		countless types of apples, oranges, and other
		well-known fruit, we are faced with thousands of choices.
	</p>
</body>
</html>

创建动画的代码复杂一些，它需要两部分，一部分是对动画的引用和一些播放参数设定：

#banana:hover {
	-webkit-animation-delay: 100ms;
	-webkit-animation-duration: 500ms;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-webkit-animation-name: 'GrowShrink';
}

上面这个片段指定了一个名为GrowShrink的关键帧集合。因而第二部分就是声明这样一个关键帧集合：

@-webkit-keyframes GrowShrink {
	to {
		font-size: x-large;
		border: medium solid white;
		background-color: green;
		color: white;
		padding: 4px;
	}
}

关键帧集合这里支持的做法很多，除了指定动画的最终状态，即to，以外，还可以用from指定初始状态和指定一些中间帧的状态。

@-webkit-keyframes GrowShrink {
	from {
		font-size: xx-small;
		background-color: red;
	}
	50% {
		background-color: yellow;
		padding: 1px;
	}
	75% {
		color: white;
		padding: 2px;
	}
	to {
		font-size: x-large;
		border: medium solid white;
		background-color: green;
		padding: 4px;
	}
}

使用变形（transform）