您的位置：首页 > Web前端 > HTML5

Notes On <The Definitive Guide to HTML5> - 03

2012-08-15 16:41 501 查看

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里看：

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

注意就是，浏览器第一次渲染页面时，是不会套用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）

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

Notes On &lt;The Definitive Guide to HTML5&gt; - 03

Notes On <The Definitive Guide to HTML5> - 03