html 变形属性,HTML5&CSS3笔记：CSS3过渡、变形和动画

目前的情况是，如果页面上需要一些动画效果，要么你自己编写 JavaScript，要么使用 JavaScript 框架(如 jQuery)来提高效率。

但是，虽然 CSS3 不可能在短期内取代 jQuery 或类似的框架，但它完全有能力做一些如平滑过渡(比如在鼠标悬停时)和在屏幕上移动元素之类的事情。这对我们来说是个好消息，它意味着在越来越多支持现代浏览器的设备中，我们可以使用 CSS 替代 JavaScript 实现动画效果。

用纯 CSS 能完成同 JavaScript 一样有趣的效果。和之前一样，不支持这些特性的浏览器不会受到任何影响，它们会自动跳过无法识别的规则，就好像这些代码根本不存在一样。

什么是 CSS3 过渡以及如何使用它

我们在给超链接设置样式时，一般都会设置一个悬停状态(hover)的效果，这种方法能明显地提醒用户他的鼠标指向的是一个超链接。虽然对越来越多的触摸屏设备没太大用处，但不管怎么说，这种方法对网站和用户之间的交互是非常简单实用的。

通常，使用 CSS 时悬停状态就是一个开关。它默认有一个状态，然后在鼠标悬停时马上切换到另一种状态。

但是使用 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; }

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

注意，这里把过渡应用到了元素而不是悬停状态hover上。这样做是为了让元素的其他状态(如:active)也能设置不同的样式并拥有类似的效果。所以请记住， 过渡声明要放在过渡效果开始的元素上。

.testcss{ color:red; transition:all 3s ease 0s; }

.testcss:hover{ color:yellow; }

过渡相关的属性

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;

}

和以前一样，别忘了浏览器私有前缀。例如，上面那句简写声明添加了浏览器私有前缀之后，代码如下：

-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;

我们将没有前缀的标准版本放在了最后面，这样当浏览器完全实现了标准之后，这句代码就会覆盖之前带前缀的版本。

在不同时间段内过渡不同属性

当一条规则要实现多个属性过渡时，这些属性不必步调一致。看看下面这段代码：

#content a { /*......其他样式......*/ transition-property:border, color, text-shadow; transition-duration:2s, 3s, 8s; }

理解过渡调速函数

ease、linear、ease-in、ease-out、 ease-in-out 以及 cubic-bezier 这些东西都是做什么用的？

它们其实都是某种贝塞尔曲线，本质上就是缓动函数。详情链接：http://cubic-bezier.com/。

CSS3 的 2D 变形

虽然两个英文单词发音相似，但 CSS 变形 (transformation，包括 2D 变形和 3D 变形) 和 CSS 过渡 (transitions) 完全不同。可以这样理解：过渡元素从一种状态平滑转换到另一种状态，而变形则定义了元素将会变成什么样子。

例如：2D 变形

nav ul li a:hover { transform:scale(1.7); }

现在如果你尝试在 Safari 浏览器中添加这种规则，须注意它需要应用该规则的原始元素必须以块状显示。不这样做的话，什么效果都没有。

我们能做哪些变形