CSS3 过渡、变形和动画

一、我们来给按钮增加一个悬停效果：
#content a:hover {
border: 1px solid #000000;
color: #000000;
text-shadow: 0px 1px white;
}
两种状态下的效果如下，先看默认状态：

 

 

再看悬停状态：

这里只是在鼠标悬停时简单地修改了一下文字、文字阴影以及边框的颜色。所以，你可
能想象出来，使用这段 CSS 代码，当鼠标悬停在按钮上面时，按钮会直接从第一种状态
（白色文字）突变到第二种状态（黑色文字）——就是一个开关效果。我们来给第一段
CSS规则添加一点 CSS3魔法：
#content a {
transition: all 1s ease 0s;
}

现在再把鼠标悬停在按钮上，文字、文字阴影和边框阴影的颜色都会从第一种状态平滑
过渡到第二种状态。

CSS3过渡效果涉及四个属性，也可以使用包含这四个属性的缩写。
 transition-property ：要过渡的 CSS 属性名称（比如 background-color 、
text-shadow 或者 all ，使用 all 则过渡会被应用到每一个可能的 CSS属性上）；
 transition-duration ：定义过渡效果持续的时间（时间单位为秒，比如 .3s 、 2s
或 1.5s ）；
 transition-timing-function ：定义过渡期间速度如何变化（比如 ease 、 linear 、
ease-in 、 ease-out 、 ease-in-out 或 cubic-bezier ）；
 transition-delay ：可选，用于定义过渡开始前的延迟时间。相反，将该值设置为
一个负数，可以让过渡效果立即开始，但过渡旅程则会从半路开始。
单独使用各种过渡属性创建转换效果的语法如下：
#content a {
……其他样式……
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 0s;
}

1. 过渡的简写语法
正如我们之前所见过的那样，我们可以将单个的声明组合成一个简写版：
transition: all 1s ease 0s;

简写声明添加了浏览器私有前缀
之后，代码如下：
-o-transition: all 1s ease 0s;
-ms-transition: all 1s ease 0s;
-moz-transition: all 1s ease 0s;
-webkit-transition: all 1s ease 0s;
transition: all 1s ease 0s;

2. 在不同时间段内过渡不同属性
当一条规则要实现多个属性过渡时，这些属性不必步调一致。看看下面这段代码：
#content a {
/*……其他样式……*/
transition-property: border, color, text-shadow;
transition-duration: 2s, 3s, 8s;
}
此处我们通过 transition-property 来指定只过渡 border 、 color 和 text-shadow ，
然后在 transition-duration 声明中我们设定边框过渡效果应该 2秒内完成，文字颜
色 3秒，文字阴影 8秒。由逗号分隔的过渡持续时间按顺序对应上面的 CSS属性。

二、CSS3 的 2D 变形

有两种可用的 CSS3变形：2D变形和 3D变形。2D变形的实现更广泛，浏览器支持更好，
写起来也更简单些，所以我们先来看看 2D 变形。CSS3 的 2D 变形模块允许我们使用下
列变形。
 scale ：用来缩放元素（放大或缩小）
 translate ：在屏幕上移动元素（上下左右四个方向）
 rotate ：按照一定角度旋转元素（单位为度）
 skew ：沿 X和 Y轴对元素进行斜切
 matrix ：允许你以像素精度来控制变形效果

傻瓜化的矩阵变形工具
无论怎么想象我都不是一个数学家，所以当我需要创建矩阵变形时，我一般都走捷径。
如果你的数学也不太好，我建议你访问这里

傻瓜化的矩阵变形工具
无论怎么想象我都不是一个数学家，所以当我需要创建矩阵变形时，我一般都走捷径。
如果你的数学也不太好，我建议你访问这里：http://www.useragentman.com/matrix/

 

尝试 CSS3 的 3D 变形

将鼠标悬停在图片上（在触摸屏上则是触击图片）就能揭晓答案。
下面的代码是相关的页面标签，其中省略了重复的图片标签，因为它们的结构都一样：
<section class="Qcontainer">
<div class="film">
<div class="face front">
<img src="img/goonies.jpg" alt="The Goonies" />
</div>
<div class="face back"><h5>HOT!</h5></div>
</div>
</section>
对应的 CSS代码如下。

.Qcontainer {
height: 100%;
width: 28%;
position: relative;
-webkit-perspective: 800;
float: left;
margin-right: 2%;
}
.film {
width: 100%;
height: 15em;
-webkit-transform-style: preserve-3d;
-webkit-transition: 1s;
}
.Qcontainer:hover .film {
-webkit-transform: rotateY(180deg);
}
.face {
position: absolute;
-webkit-backface-visibility: hidden;
}
.back {
width: 66%;
height: 127%;
-webkit-transform: rotateY(180deg);
background: #3b3b3b;
background: -webkit-linear-gradient(top,
rgba(0,0,0,0.65) 0%,
rgba(0,0,0,0) 100%);
padding: 15%;
}
代码部署好之后，将鼠标悬停在海报图片上，会看到图片翻转到背面并显示出了该电影
的评判结果。

 

CSS3 动画效果

首先是关键帧规则：
@keyframes warning {
0% {
text-shadow: 0px 0px 4px #000000;
}
50% {
text-shadow: 0 0 20px #000000;
}
100% {
text-shadow: 0px 0px 4px #000000;
}
}
此处的代码没有加前缀，如果在浏览器中没有效果，你可能需要添加一组完整的浏览器
私有前缀（如 @-webkit-keyframes ）。

分析代码：

首先，我们定义了一个 @keyframes （关键帧）声明。然后为这个特定的关键帧声明设置
了一个名称： warning 。你可以将其叫成任何名字，但考虑到这些关键帧声明可以在多
个元素上复用，所以建议取一个合理的名字。
可以设置多个关键帧（比如百分比值 10%、20%、30%、40%等等），或者也可以使用 from
和 to 值来定义动画的开始帧和结束帧。

动画开始时是 4像素阴影，然后用 50%的时间变化至 40像
素阴影，之后再变化回 4像素阴影

我们设定了要使用的关键帧（例子中的 warning ），然后设定
了动画的持续时间（ 1.5s ），之后设定了 animation-iteration-count （我们在此时
使用了 infinite 让动画连续循环播放），最后设定了调速函数（ ease-in ）。