HTML5&CSS3笔记：CSS3过渡、变形和动画

比眉伴天荒 2022-07-15 16:54 285阅读 0赞

目前的情况是，如果页面上需要一些动画效果，要么你自己编写 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/][http_cubic-bezier.com]。

## CSS3 的 2D 变形 ##

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

例如：2D 变形

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

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

**我们能做哪些变形**

有两种可用的 CSS3 变形：2D 变形和 3D 变形。

2D 变形的实现更广泛，浏览器支持更好， 写起来也更简单些。CSS3 的 2D 变形模块允许我们使用下列变形：

scale:用来缩放元素(放大或缩小)
    translate:在屏幕上移动元素(上下左右四个方向)
    rotate:按照一定角度旋转元素(单位为度)
    skew:沿 X 和 Y 轴对元素进行斜切
    matrix:允许你以像素精度来控制变形效果

scale：`transform: scale(0.5);`

translate：`transform: translate(40px, 0px);`  
translate 会告知浏览器按照一定度量值移动元素，可以使用像素或百分比。语法是第 一个值表示从左向右移动的距离(本例中是 40 像素)，然后是从上往下移动的距离(本例中是 0 像素)。

rotate：`transform: rotate(90deg)`

skew：`transform: skew(10deg, 2deg);`  
它会让元素在一个或两个轴上变形偏斜。第一个值是 X 轴上的斜切(本例中是 10 度)，第二个值是 Y 轴上的斜切(本例中是 2 度)。 省略第二个值意味着仅有的值只会应用在 X 轴上(水平方向)。

matrix：`transform: matrix(1.678, -0.256, 1.522, 2.333, -51.533, -1.989);`  
要完全理解矩阵你得了解相关的数学知识: [http://www.w3.org/TR/css3-2d-transforms/\#cssmatrix-interface][http_www.w3.org_TR_css3-2d-transforms_cssmatrix-interface]。  
如果你的数学也不太好，我建议你访问这里:[http://www.useragentman.com/matrix/][http_www.useragentman.com_matrix]。  
Matrix Construction Set 这个网站可以让你精确地将元素拖曳成想要的样子，然后它会自动生成完美的矩阵代码(代码中包含了浏览器私有前缀)。

transform-origin 属性：  
在使用上述变形效果的同时，你还可以使用 transform-origin 属性来修改变形效果的起点。  
transform-origin 属性的详细信息请见这里:[http://www.w3.org/TR/css3-2d-transforms/\#transform-origin-property][http_www.w3.org_TR_css3-2d-transforms_transform-origin-property]。

## 尝试 CSS3 的 3D 变形 ##

Webkit 核心浏览器(Safari 和 Chrome)和 Firefox 10+都已支持 CSS3 的 3D 变形，但最新的 IE10 都还不支持该特性。尽管缺少“桌面版”浏览器的广泛支持，但多亏了移动平台浏览器基本都是 Webkit 血统，所以 3D 变形在 Android(V3 以后的版本)和 iOS(所有版 本)上均被支持。

实例代码：

html

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

代码部署好之后，将鼠标悬停在图片上，会看到图片翻转到背面并显示出了该电影的评判结果。

下面来研究一下代码，看看 3D 变形效果是如何实现的。

第一个要点是在父级元素上设置透视。这样就开启了 3D 场景:

.Qcontainer {
        height: 100%;
        width: 28%;
        position: relative; 
        -webkit-perspective: 200; <-- 这是重点
        float: left;  
        margin-right: 2%;
    }

透视的值越大，就表示你的视点与 3D 场景之间的景深越大。因此，如果想要一点隐约的 3D 效果，就增大透视值；如果想要非常明显的 3D 效果，则减小透视值。(3D 效果的立体程度，取决于 3D 场景与观察者之间的距离。)

下一个要点：

.film {
         width: 100%;
         height: 15em;
         -webkit-transform-style: preserve-3d;<-- 这是重点
         -webkit-transition: 1s;
     }

.Qcontainer 类中添加的透视声明只会应用到其第一个子元素上(即本例中的 class为.film 的 div)。因此，为了延续父元素的透视，我们给.film 元素设定了 preserve-3d (这样可以设置一个 3D 场景)。

接下来，当鼠标悬停在.Qcontainer 模块上时，我们给.film 这个 div 添加一个翻转效果：

.Qcontainer:hover .film { -webkit-transform: rotateY(180deg); }

接下来的规则用来处理当海报翻转之后隐藏在其背面内容：

.face { position: absolute; -webkit-backface-visibility: hidden; }

.face 必须使用绝对定位，这样海报才能盖在.back 这个 div 的上面：

.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%; }

最后，我们给.back 这个 div 也加上 rotateY。不加这句的话，.back 这个 div 就会显示在正面海报之上。

我们可以用一点传统的 CSS 代码为非 Webkit 核心浏览器提供一个合理的降级方案。

3D 变形尚未成熟，大多数 3D 变形在使用百分比尺寸时效果都不太好。但是，CSS3 3D 变形的前途是光明的，当浏览器开始广泛支持时，它就为我们提供了一次难得的机遇，让我们可以将现在依赖于 JavaScript 的优雅效果移植到样式表中。

## CSS3 动画效果 ##

相较于 3D 变形，CSS3 动画的浏览器支持度更高。Firefox 5+、Chrome、Safari 4+、Android(所有版本)、 iOS (所有版本)均支持，IE 10 也决定加入该行列。

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 值来定义动画的开始帧和结束帧。但注意 Webkit 浏览器在使用 from 和 to 值的情况下效果无法保证。

本例给文字阴影加一点动画，动画开始时是 4 像素阴影，然后用 50%的时间变化至 40 像素阴影，之后再变化回 4 像素阴影。

我们已经声明了关键帧，接下来可以在动画属性中引用它：

.back h5 { font-size: 4em; color: #f2050b; text-align: center; animation: warning 1.5s infinite ease-in; }

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

CSS3 动画缩写语法可以接受全部 7 个独立动画属性的值。  
除了上例中使用的之外，还可以设定 animation-delay(动画开始前的延时)，animation-play-state(值可以是 running 或 paused，用于控制动画的播放和暂停)，最后还有 animation-fill-mode， 这个属性到现在我也没找到用武之地(默认值是 none)。当然也可以不用缩写语法，而是将它们一个一个单独列出来。

animation-name: warning;
    animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-play-state: running;
    animation-delay: 0s;
    animation-fill-mode: none;

这只是使用 CSS3 动画的一个简单示例。事实上任何 CSS 属性都可以用在关键帧动画中，所以有无限可能性。

网上有数不清的 CSS3 动画技巧范例，像 [http://webdesignerwall.com/trends/47-amazing-css3-animation-demos][http_webdesignerwall.com_trends_47-amazing-css3-animation-demos] 这个网页就足以给你提供丰富的 CSS3 动画灵感。

[http_cubic-bezier.com]: http://cubic-bezier.com/
[http_www.w3.org_TR_css3-2d-transforms_cssmatrix-interface]: http://www.w3.org/TR/css3-2d-transforms/#cssmatrix-interface
[http_www.useragentman.com_matrix]: http://www.useragentman.com/matrix/
[http_www.w3.org_TR_css3-2d-transforms_transform-origin-property]: http://www.w3.org/TR/css3-2d-transforms/#transform-origin-property
[http_webdesignerwall.com_trends_47-amazing-css3-animation-demos]: http://webdesignerwall.com/trends/47-amazing-css3-animation-demos