CSS3秘笈：第十章

CSS的transform、transition和animation属性

1.transform（倾斜）：利用transform属性可以使导航栏稍微倾斜，或者使图片在访问者的鼠标经过它时放大两倍，甚至可以结合更多transform属性设计出其他效果。

例如，要旋转一个元素，要先提供关键字rotate，后面是要旋转的度数：

transform：rotate（10deg）; 这条声明是将元素沿顺时针方向旋转10°。

解决兼容问题必须这样改写代码：

-webkit-transform：rotate（10deg）;

-moz-transform：rotate（10deg）;

-o-transform：rotate（10deg）;

-ms-transform：rotate（10deg）;

transform：rotate（10deg）;

其中-ms-prefix是微软公司的供应商前缀。

CSS的transform属性有一项奇怪的特性，就是它们对于周围的元素不会产生影响。换句话说，如果将一个元素旋转成45°角，它实际上是重叠在元素的上方、下方或者旁边。例如，当你使用transform的scale功能放大某个元素时，浏览器会放大该元素但是不会移动周围的内容，会导致网页有些部位发生重叠。以下是transform属性的几种功能：

（1）rotate（旋转）功能：transform属性的rotate功能很容易理解：给它提供一个0~360之间的度数值，数字后面要带deg。正值代表顺时针旋转，负值代表逆时针旋转。

（2）scale（缩放）功能：调整元素的尺寸，让它变得更大或更小。

例如，为了使一个元素放大两倍，可以添加以下声明：

transform：scale（2）；括号中提供的数字就是缩放的倍率。它要乘以元素的当前尺寸。scale最常见的用法就是让网页上的一个元素动态地发生视觉上的变化。例如，当鼠标移过一个按钮时，使该按钮突然变大。这种效果利用：hover状态可以实现。例如，假设网页上有一个链接应用了 .button类，可以创建一个简单的样式对按钮格式化“

. button {

font：9em Arial , Helvetica , sans-serif；

border-radius：.5em；

background-color：rgb（34,255,23）；

border：1px solid rgba（0,0,0, .5）；

padding：.5em；

}

为了着重强调这个按钮，可以使它在访问者的鼠标经过时稍微变大，像这样：

. button：hover {

-webkit-transform：scale（1.2）；

-moz-transform：scale（1.2）；

-o-transform：scale（1.2）；

-ms-transform：scale（1.2）；

transform：scale（1.2）；

}

使用水平和垂直缩放，括号中要提供两个值，用逗号隔开。

CSS3还为水平缩放和垂直缩放提供了功能：scaleX沿着X轴缩放，scaleY沿着Y轴缩放。

（3）translate属性：

translate函数只是将一个元素从它现有的位置向左或向右以及向上或下移动一定的距离。translate函数有两个值：一个指定水平距离，负值向左，正值向右。另一个指定垂直距离，负值向上，正值向下。

（4）skew（倾斜）；将元素倾斜时将它沿着X轴或Y轴倾斜：这样可以让元素产生一种三维效果。

多个transform函数共用：transform函数功能可以一起使用，在每个功能之间添加空格就好。例如，要将一个元素旋转45°并放大正常尺寸的两倍。可以这样编写代码：

transform：rotate（45deg） scale（2）；

（5）origin：transform-origin属性可以改变元素的变换点。

2.transition是指在一定的时间之内，一组CSS属性变换到另一组属性的动画展示过程。为了使

（1）两个样式：一个样式代表该元素最初的样子，另一个样式代表最终的样子。Web浏览器将负责以动画形式展示这两个样式之间的变化过程。

（2）transition属性：CSS3增加了transition属性，这正是使动画成为可能的秘诀的所在。一般来说，是将transition属性应用到最初的样式中，定义动画开始之前的元素的外观样式。

（3）触发器：是指促使这两个样式发生变化的执行动作。可以用几个伪类来触发动画。其中最常用的是伪类：hover。

如何添加transition？

假设在链接中应用一个类.navButton，然后创建两个样式，像下面这样：

.navButton {

background-color：orange；

}

.navButton：hover{

background-color：blue；

}

这些样式在任何浏览器中都有效，当鼠标悬停在导航按钮上时，将会使它的背景色由橙色变成蓝色。但是，这种变化是瞬间的，为了使下面这个变化能持续1秒，必须在.navButton中添加两个新的属性，像下面这样：

.navButton {

background-color：orange；

transition-property：background-color；

transition-duration：1s；

}

.navButton {

background-color：blue；

}

第一个属性是transition-property，它定义了要以动画的形式展示哪些属性。或者用关键字all或者利用一个以逗号隔开的属性清单来指定多个属性。例如：假设创建一个：hover样式，文本颜色、背景色以及边框的颜色都会发生变化。你可以全部列出这3种属性，像这样：transition-property：color，background-color，border-color；或者为了简单起见，可以使用关键字all，像这样：transition-property：all。甚至可以针对每一个要以动画形式展示的属性分别定义时限。例如，当访问者的鼠标经过一个按钮时，想让文本颜色迅速发生变化，背景色则变化的稍微缓慢一些，边框色则变化的更缓慢一些。为了实现这些效果，需要利用transition-property列出要以动画形式展示的属性，然后利用transition-duration列出各个属性需要的时间，代码如下：

transition-property：color，background-color，border-color；

transition-duration：.25s，.75s，.2s；

这里的时间排列顺序必须与对应属性顺序一致。

可以使用transition-timing-function属性控制动画的速度。属性值可以为以下关键字之一：ease、ease-in、ease-out、ease-in-out和linear。ease会使动画一开始很慢中间逐渐加快，最后又逐渐减速。linear则是使整个动画过程平稳地发生变化。

transition-delay属性阻止transition立即开始展示动画。例如，如果想让动画延迟半秒钟才开始，可以添加以下代码：transition-delay：.5s。

3.animation：使用transition时，只能从一组属性变化到另一组属性，而使用animation则可以让一组属性转变到另一组属性，再转变到另一组属性。也可以让某一个动画重复，或者在有访问者的鼠标经过它时暂停，甚至让动画结束后立即自动返回。animation比transition更复杂一些，但是它不需要触发。

创建动画有两个步骤：

（1）定义动画：创建关键帧。

（2）将动画应用到元素上。

第一步：定义关键帧。其语法可能看起来显得有些怪异，以下是它的基本结构：

@keyframes animationName {

from {

/* list CSS properties here */

}

to {

/* list CSS properties here */

}

}

它以@keyframes开头，紧接着是动画的名称。然后添加至少两个关键帧。在本例中，关键字from和to用来创建起始关键帧和结束关键帧。每个关键帧中可以添加一个或者多个CSS属性。例如，想要创建一个动画，让一个元素淡入视图，就可以让opacity值先为0，再以1结束：

@keyframes fadeIn{

from{

opacity：0；

}

to {

opacity：1；

}

}

animation的一大缺点就是需要特定的供应商前缀。

4.假设想让一个带有重要通告的div在载入网页中淡入视图。这个div有一个类命名为announcement：<div class=“announcement”>。

首先，用@keyframes规则创建淡入动画：

@keyframes fadeIn {

from { opacity：0；}

to { opacity：1；}

}

然后将动画应用给<div>标签的样式：

. announcement {

animation-name：fadeIn；

animation-duration：1s；

}

animation-那么属性告诉浏览器要使用哪一个动画。这个名字就是第一步创建的名字。

如何给animation定时？使用animation-duration属性可以控制动画的时长。

animation-iteration-count属性可以让动画运行一次、两次、甚至无限制。值可以是准确值（数字代表次数），也可以是关键字infinite（代表无限制）。

animation-direction：alternate可以让动画奇数次超前运行，偶数次后退运行。

animation-fill-mode：forwards告诉浏览器将动画保持为结束时的样子。

animation-play-state属性可以控制动画的播放。它只接受两个关键字：running和paused想要暂停某一个动画只要在样式中添加以下声明即可：animation-play-state：paused。