CSS Transitions

你好！ HTML5 & CSS3 作者：Rob Crowther 过渡是指两个元素状态之间的一个短暂动画，例如激活下拉菜单或关闭弹出消息。菜单可能不会立即出现或消失，而是会滑动下来，弹出消息可能会淡出。在这篇来自 Hello! HTML5 & CSS3 的文章中，作者 Rob Crowther 讨论了这些效果如何通过使界面更逼真来提高可用性，并可用于阐明关系。 您可能还对以下内容感兴趣…

 

应用过渡的一种简单方法是使用动态伪类，如 :hover。在以下一组屏幕截图中，上一节中的三个转换示例已应用于包含 <div> 的 :hover 状态，过渡持续 10 秒。更改会逐渐发生，而不是从一个状态翻转到另一个状态。仔细看，每个屏幕截图上的飞虫状斑点都是鼠标指针。

 

此示例来自 ch09/transforms-5.html，具有 10 秒过渡，可从 *Hello! HTML5 and CSS3* 的 源代码 下载。本文中的所有其他示例都可以在此源代码中找到。

此示例来自 ch09/transforms-6.html，具有 10 秒过渡。

 

此示例来自 ch09/transforms-7.html，具有 10 秒过渡

 

transition-duration 属性是创建动画所必需的唯一属性

div div {
    transition-duration: 10s;
}

尽管父元素处于 hover 状态时，所有三个元素都有独特的状态，但所有三个都根据之前的规则进行了过渡。请查看 ch09/transitions-1.html 以便亲眼看看。

div:hover div:nth-child(1) {
    transform-origin: bottom right;
    transform: rotate(16.5deg);
}
div:hover div:nth-child(2) {
    transform-origin: top right;
    transform: rotate(33deg);
}
div:hover div:nth-child(3) {
    transform-origin: top left;
    transform: rotate(66deg);
}

当 transition-duration 设置在元素的默认状态（在本例中为非 hover 状态）时，过渡的正反向播放时长相同——当元素进入 hover 状态和离开 hover 状态时，过渡将持续 10 秒，如 ch09/transitions-3.html 列表的结果所示。

 

但您可以将 transition-duration 设置在 hover 状态。在这种情况下，它仅在元素进入 hover 状态时适用。当元素离开 hover 状态时，它会立即恢复到起始位置——时长为零。

 

这是来自 ch09/transitions-4.html 列表的关键代码

div:hover div { transition-duration: 10s; }

您也可以将 transition-duration 设置在两种状态上。在下一个示例中，过渡在进入 hover 状态时持续 10 秒，在退出时持续 5 秒。

退出 hover 状态的时长在没有 :hover 的规则上指定

div div { transition-duration: 5s; }
div:hover div { transition-duration: 10s; }

请参阅 ch09/transitions-5.html 列表中的完整示例。

过渡时间函数

默认情况下，过渡以恒定速率发生，但您可以使用 transition-timing-function 属性进行调整。默认值为 linear，但还有其他几个关键字可用：ease-in-out、ease-in、ease-out 和 ease。其区别比解释更容易看到，因此接下来的四张屏幕截图并排展示了在 20 秒过渡中的运行效果。

最快开始的是 ease-out，其次是 ease。ease-in-out 和 ease-in 最初都比 linear 慢。

几秒钟后，ease 已经超越了 ease-out。

 

当您超过中点时，ease-in-out 已经加速，领先于 linear。

在过渡结束时，ease-in 开始赶上其他项；请记住，所有五个过渡都需要 20 秒才能完成。

非 linear 的过渡时间通常看起来更自然——事物倾向于加速和减速，而不是突然开始和停止移动。

您也不仅限于 hover 上的效果；任何其他动态伪类都可以同样有效地工作。通过稍作修改，我们的 :target 示例可以平滑地淡入淡出。

1. 页面加载时为空白。	2. 当您单击第一个链接时，内容开始淡入。	3. 10 秒后，过渡完成。
4. 单击第二个链接会启动两个过渡。当前文本开始淡出……	5. ……新页面开始淡入。	6. 10 秒后，新内容已替换旧内容。

唯一添加的是一个 <section> 元素，以便可以绝对定位段落

<menu>
    <a href="#one">Show one</a>
    <a href="#two">Show two</a>
    <a href="#three">Show three</a>
    <a href="#four">Show four</a>
</menu>
<section>
    <p id="one">I never am really
satisfied...</p>
    <p id="two">In almost every
computation...</p>
    <p id="three">Many persons who are not
conversant...</p>
    <p id="four">The Analytical Engine has no
pretensions...</p>
</section>

然后段落会在 10 秒内淡入淡出。淡入使用时间函数 ease-in（开始慢，结束快），淡出使用 ease-out，以便消失的段落尽快开始淡出，从而立即向用户提供反馈

 
section { position: relative; }
p {
    opacity: 0;
    position: absolute;
    transition-duration: 10s;
    transition-timing-function: ease-out;
}
p:target {
    opacity: 1;
    transition-timing-function: ease-in;
}

请参阅 ch09/transitions-6.html 中的完整源代码。

Transition Property (过渡属性)

到目前为止，示例通过仅列出过渡状态中已更改的属性来隐式选择将应用哪些属性。因此，每个属性都受到相同的持续时间和时间函数的影响。但是，可以对同一元素应用多个过渡，每个过渡影响不同的属性。

在本文的这一部分，您将利用所有过渡属性接受逗号分隔列表中的多个属性这一事实。您可以声明两个过渡持续时间，一个为 10 秒，一个为 20 秒，如下所示

transition-duration: 10s, 20s;

然后，如果您这样声明 transition-property

transition-property: top, transform; 

top 属性的过渡将花费 10 秒，而 transform 属性的过渡将花费 20 秒。下一个示例比较了两个具有相同过渡持续时间但不同过渡属性的元素。

正如您所见，元素一快速下落并缓慢扩展，而元素二快速扩展并缓慢下落。标记是在 <section> 中包含两个 <div> 元素，并应用了以下 CSS

section div {
    position: absolute;
    top: 0px;
    transition-duration: 10s, 20s;
    transition-property: top, transform;
}
section div:nth-child(2) {
    left: 200px;
    transition-property: transform, top;
}
section:hover div {
    top: 280px;
    transform: scale(1.5);
} 

Transition Delay (过渡延迟)

您不必在触发过渡的操作完成后立即开始过渡。transition-delay 属性允许您指定在过渡开始之前的等待时间。在以下屏幕截图中，第二个元素在第一个元素开始后五秒才开始过渡，第三个元素在之后又五秒开始过渡。

来自 ch09/transition-delay-1.html 列表中的代码与 ch09/transitions-3.html 中的代码相同，除了这两个规则

div div:nth-child(2) { transition-delay: 5s; }
div div:nth-child(3) { transition-delay: 10s; }

transition-delay 最常见的用法是将多个过渡链接在一起。如果您希望元素先移动，然后再放大，您可以这样指定两个过渡

div {
    transition-duration: 10s, 10s;
    transition-delay: 0, 10s;
    transition-property: top, transform;
} 

元素将首先过渡 top 值，然后过渡 transform。您可以在代码文件 ch09/transitiondelay-2.html 中看到一个完整示例。使用 transition-delay，可以创建多步动画，前提是每一步都转换不同的属性。

通过 JavaScript 触发过渡

在元素上定义过渡后，计算样式的任何更改都会触发动画。这不一定是因为动态伪类生效；您还可以使用 JavaScript 更改样式。

单击“左移”按钮会启动一个动画。	在 10 秒内，元素向左移动。
类似地，单击“上移”会启动另一个动画。	在 10 秒内，元素从页面顶部向下移动。

这是页面的 HTML

<menu>
    <button
onclick="clickme('changeleft')">Change left</button>
    <button onclick="clickme('changetop')">Change
top</button>
    <button
onclick="clickme('changecolor')">Change color</button>
    <button
onclick="reset()">Reset</button>
    </menu>
<div id="animateme">Animate Me</div>

CSS 定义了动画和三个调整相关属性的类

#animateme {
    background-color: #666;
    position: absolute;
    color: #fff;
    left: 100px;
    top: 100px;
    transition-duration: 10s;
}
.changeleft { left: 250px !important; }
.changetop { top: 300px !important; }
.changecolor { background-color: #ff00ff !important; }

请注意，您必须使用 !important，否则 ID 选择器将优先。最后，这是单击按钮时将样式应用于元素的 JavaScript 函数

function clickme(classname) {
    var el = document.getElementById('animateme');
    el.className += " " + classname;
}

这是一个重置函数，用于清除样式

function reset() {
    var el = document.getElementById('animateme');
    el.setAttribute("style","");
}

 

此示例切换到 Opera，以便您可以利用 color 输入类型。

 

将 left 和 top 设置为 200，并将颜色设置为浅蓝色。	元素像以前一样在 10 秒内进行动画。	动画已完成。
将 left 设置为 0，top 设置为 300，颜色设置为黑色。	元素从其当前位置进行动画。	10 秒后，新的属性生效。

<menu>
    <button onclick="clickme()">Click
Me</button>
    <button
onclick="reset()">Reset</button>
    <label for="myleft">left</label>:
        <input id="myleft" type="number"
value="100">
    <label for="mytop">top</label>:
        <input id="mytop" type="number"
value="100">
    <label for="mycolor">color</label>:
        <input id="mycolor" type="color"
value="#666666">
</menu>
<div id="animateme">Animate Me</div>
function clickme() {
    var el = document.getElementById('animateme');
    var left = document.getElementById('myleft').value;
    var top = document.getElementById('mytop').value;
    var color = document.getElementById('mycolor').value;
    el.setAttribute("style","left: " + left +
"px; top: " + top +
        "px; background-color: " + color +
";");
}

摘要

这些是 CSS3 中一些更酷的方面——深受平面设计师喜爱的功能。当与另一项新的 CSS3 功能（过渡）结合使用时，转换效果会脱颖而出。在本文中，您已经了解了 CSS3 的一项新功能：过渡。

您可能还会对以下 Manning 图书感兴趣：

	HTML5 in Action (HTML5 实战) Robert Crowther、Joe Lennon、Ash Blue 和 Greg Wanish
	HTML5 for .NET Developers Jim Jackson II and Ian Gilman
	Sass 和 Compass 实战 作者：Wynn Netherland、Nathan Weizenbaum 和 Chris Eppstein