动画

Internet Explorer 10 和使用 JavaScript 的 Windows 应用商店应用支持级联样式表 (CSS) 动画。CSS 动画允许你创建功能丰富、具有视觉冲击力以及平滑、流畅和动画体验的应用程序。

CSS 动画由万维网联合会 (W3C) 在 CSS 动画规范中定义。

动画功能类似于过渡功能,两者均通过更改位置、大小、颜色和透明度,以及旋转、缩放、平移等方式,对元素施加动画效果。与过渡操作相同,你可以指定一些计时函数来控制动画的进度。

但是,借助级联样式表级别 3 (CSS3) 动画,你还可以使用关键帧在动画处理期间的不同时间点为动画属性指定值。这样,你不仅可以定义动画开头和末尾的动画行为,还可以定义动画过程中的动画行为。动画功能还可以具有迭代和反向功能,并可以提供暂停和恢复能力。

正如你所预期的那样,CSS3 动画提供了无限可能,让你能够创造极具吸引力的丰富体验。本主题简要概述如何在 Internet Explorer 10 和使用 JavaScript 的 Windows 应用商店应用中创建 CSS 动画,并演示了使用 CSS3 动画的示例。

本主题中介绍的属性 At-Rule 和事件以前需要一个特定于 Microsoft 供应商的前缀(即 "-ms-")以便用于 Internet Explorer 10 和使用 JavaScript 的 Windows 应用商店应用。现在不再需要该前缀,没有这个前缀仍然可以识别。为了确保将来能够兼容,应该相应地更新将 Microsoft 供应商前缀与动画属性结合使用的应用程序。

有关可创建动画的 CSS 属性的列表,请参阅动画和过渡属性

创建动画

创建动画分三个基本步骤:

1. 指定动画属性。
2. 创建关键帧。
3. 对一个或多个元素应用动画。

指定动画属性

首先,在你要对元素应用动画的选择器中指定动画属性。动画属性在本节中描述。

animation-name 属性

animation-name 属性指定动画标识符(其实就是你给特定动画所起的名字)。动画标识符选择 CSS @keyframes At-Rule。其语法如下所示:

属性描述

animation-name

指定一个或多个动画标识符。使用 CSS @keyframes At-Rule 来标识动画。

 

animation-duration 属性

animation-duration 属性指定完成一个动画循环的时间长度。其语法如下所示:

属性描述

animation-duration

指示一个或多个以逗号分隔的时间值,每个时间值表示一个完整动画循环所需的时间长度。每个值以浮点数的形式表示,后面跟着时间单位符号(ms 或 s)。该属性接受负值。

 

animation-timing-function 属性

通过描述如何计算在单个动画循环内所使用的中间属性值,animation-timing-function 属性使动画能在其持续期间改变速度。你可通过指定基于三次方贝塞尔曲线的动画计时函数(该函数有四个参数)来达到此目的。你既可为整个动画也可为个别关键帧指定计时函数。

既可以通过使用 cubic-bezier 函数并手动输入四个值来显式指定曲线,也可以从多个函数关键字中进行选择,每个函数关键字对应一个常用的计时函数。该属性的语法如下所示:

属性描述

animation-timing-function

指定一个或多个以逗号分隔的计时函数,该函数指定在单个动画循环内所使用的中间属性值。动画根据在 CSS  @keyframes At-Rule(由 animation-name 属性所指定)中标识的一组对应的对象属性进行计算。它们的值可能是以下任意一项:请参阅 animation-timing-function 参考页以了解每个函数的说明。

cubic-bezier(x1y1x2y2)

该函数的四个参数必须是介于(含)0 和 1 之间的浮点值。这些值对应于三次方贝塞尔曲线的 P1 和 P2 点的 x- 和 y-坐标。对于除 opacitycolor 以外的其他属性,cubic-bezier 曲线函数可接受超出 0 和 1 之间标准范围的 y-坐标。这使你可以创建“弹性”或“反弹”过渡效果。

ease

这是初始值。此计时函数在开始时逐渐提高速度,进而以全速执行动画,在结束时逐渐降低速度。

linear

此计时函数自始至终都保持相同的速度。

ease-in

此计时函数在开始时逐渐提高速度。

ease-out

此计时函数在结束时逐渐降低速度。

ease-in-out

此计时函数在开始时逐渐提高速度,然后在结束时逐渐降低速度。

steps

此计时函数指定一个阶梯式计时函数,并接受两个参数。第一个参数指定间隔数;第二个可选参数指定在间隔内更改属性值的时间点。第二个参数被限制为 startend 值,这是默认设置。

 

animation-iteration-count 属性

animation-iteration-count 属性定义动画循环的播放次数。该属性的语法如下所示:

属性描述

animation-iteration-count

定义动画循环的播放次数。用逗号分隔多个值。

<number>

动画循环的播放次数。你可以指定一个非整数数字,这样动画将在一个循环内的某个时间点结束。默认值为 "1"。

infinite

动画将一直重复。

如果指定了一个负值或 "0" 值,则不应用任何动画。

你可以在使用 animation-iteration-count 属性的同时将 animation-direction 属性设置为 alternate,从而使动画在交替循环时反向播放。

 

animation-direction 属性

animation-direction 属性指定动画循环的播放方向。该属性的语法如下所示:

属性描述

animation-direction

指定动画是否在交替循环时反向播放。此属性可被设置为下列逗号分隔值中的一个或多个:

normal

这是初始值。指示动画将不在交替循环时反向播放。

reverse

此值指示动画循环以指定方向的反向进行播放。

alternate

该值指示动画循环在正向播放(奇数迭代)和反向播放(偶数迭代)之间交替。

alternate-reverse

此值指示动画循环在反向播放(奇数迭代)和正向播放(偶数迭代)之间交替。

 

animation-play-state 属性

animation-play-state 属性指定动画是播放还是暂停。在创建使用户能够暂停动画的机制时,可使用该属性。该属性的语法如下所示:

属性描述

animation-play-state

指定动画是运行还是暂停。此属性可被设置为下列逗号分隔值中的一个或多个:

paused

暂停正在运行的动画。动画将继续以静止状态显示动画的当前值,就好像动画的时间是恒定的一样。

running

继续运行之前被暂停的动画。动画从当前值重新启动。

 

animation-delay 属性

animation-delay 属性指定动画开始的时间并使动画能够在应用一段时间后开始。其语法如下所示:

属性描述

animation-delay

在为一组相应的对象属性显示动画之前,指定一个或多个以逗号分隔的动画内的偏移值(从动画开始的时间量)。每个值以浮点数的形式表示,后面跟着时间单位符号(ms 或 s)。

  • "0" 值为初始值,指示动画将在应用时立即执行。
  • 负值指示动画将在应用时立即执行,但会显示为已经在特定偏移点开始执行或开始于其播放循环之中。

 

animation-fill-mode 属性

animation-fill-mode 属性指定在动画开始播放之前或结束播放之后,动画效果是否可见。默认情况下,在应用和执行动画之间的时间内(即由 animation-delay 属性所定义的任何延迟时间),动画不影响属性值。此外,默认情况下,在动画结束播放之后(即由 animation-duration 属性所指定的时间已经过去之后),动画不影响属性值。animation-fill-mode 属性被用来替代这些默认行为。其语法如下所示:

属性描述

animation-fill-mode

指定一个或多个逗号分隔的值,用于定义在动画播放时间之外的动画行为。它可以被设置为以下任何一个值:

none

默认行为是不变。

forwards

当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。

backwards

animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。

both

向前和向后填充模式都被应用。

 

animation 属性

animation 速记属性将六个动画属性组合成一个属性。其语法如下所示:

属性描述

animation

为一组对应的对象属性指定一个或多个空格分隔的动画属性。动画属性值必须按下列顺序进行设置:

如果有多组六个动画属性值,则必须使用逗号来分隔各个组。

 

考虑下面的代码示例,它在 div 元素上指定多个动画属性:


div {
  animation-name: myAnimation;
  animation-duration: 3s;
  animation-timing-function: ease-out;
  animation-delay: -1s;
  animation-iteration-count: 2;
  animation-direction: normal;
}


借助 animation 速记属性,你可以在一行指定所有这六个属性,如下所示:


div {
  animation: myAnimation 3s ease-out -1s 2 normal;
}


创建关键帧

接下来,为你的动画指定关键帧。关键帧使你能很好地控制动画中的中间值。@keyframes 规则为对象指定属性动画关键帧的列表,并为动画指定标识符。其语法如下所示:

规则描述

@keyframes

HTML 文档中的对象的属性动画关键帧的列表。此规则用于指定动画播放期间不同点的属性值,以及动画的标识符。它指定一个动画循环内的属性值。(动画可迭代一次或多次。)

此规则使用关键帧选择器来指定动画不同阶段的属性值。关键帧选择器可被声明为 from(相当于 0%)、to(相当于 100%)以及一个或多个百分比。

 

下面的示例演示了三个关键帧选择器,每个选择器有两个关键帧描述符。


@keyframes myAnimation {
  from {     
    left: 100px;
    right: 50px;  
  } 
  40% {      
    left: 50px;
    right: 10px; 
  }
  to {         
    left: 10px;
    right: 10px;
  }
}

在此示例中,我们为动画期间的三个点指定关键帧:开始点(from 值或 0%)、40% 和结束点(to 值或 100%)。

你还可以指定随着动画移动到下一个关键帧将要使用的计时函数。只需在相应的关键帧选择器中包含 animation-timing-function 属性。

应用动画

最后,对元素应用动画样式。通常,这是由事件来触发的,如单击一下按钮(或点击一下屏幕)。注:CSS 动画不能通过更改动画的属性值来中断,而过渡可以。CSS 动画只能通过使用 animation-play-state 属性或者添加或删除动画名称来中断。

当动画完成时,动画属性返回到其原始值。

示例

下面的示例演示 CSS 动画。它是使用 IE Test Drive 上的实例演示:动画演示来创建的。

首先,我们将创建一个包含文字的 div 元素,并对它应用某些样式:


<!DOCTYPE html>
<html lang="en-us">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<style type="text/css">
body {
  padding:10px;
  font:bold 20pt "Segoe UI";
}
div {
  width:250px; 
  background-color:lime;
  padding:10px;
}
</style>
</head>
<body>
<div>
Duis ac leo sit amet lectus tristique pulvinar nec rutrum dolor. Etiam sed ipsum enim,
vitae euismod odio. Suspendisse eu.
</div>
</body>
</html>


要查看这段代码的执行结果如何显示,可查看此页

现在,我们来为动画定义一些参数。我们将一个选择器添加到使用 :active 伪类的 style 部分。这意味着只有用户单击并保持按住(或点击并保持按住)文本块,动画才会发生。动画会继续,直到播放结束。

为确保动画立即开始、持续 5 秒钟、重复一次(总迭代次数为 2)并将此动画命名为“demo”,我们添加以下选择器:


...
div:active {
  animation-delay: 0s;
  animation-duration: 5s;
  animation-iteration-count: 2;
  animation-name: demo;
}
...

现在,我们要创建三个关键帧—,分别对应动画的开始点、中间点和结束点。在每个关键帧中,我们将定义两个属性,它们是用于定义变化率的更改和计时函数。


@keyframes demo {
  from {
    animation-timing-function: ease;
  }
  50% {
    background-color: purple;
    animation-timing-function: ease-in;
    transform: translate(20px,30px);
  }
  to {
    background-color: blue;
  }
}

我们已经为动画定义了两个属性:background-colortransform。在动画的一次循环过程中,div 元素的背景色由浅绿色(原始色)变为紫色,接着变为蓝色。div 元素还分别向右移动了 20 个像素并向下移动了 30 个像素,然后返回。此动画使用了 ease 计时函数,动画从开始进行到中间点(关键帧位于 50% 的位置),然后 ease-in 计时函数从中间点进行到结束。动画重复了一次。

查看此动画。(Internet Explorer 10 是必需的。)

动画 DOM 事件

Internet Explorer 10 和使用 JavaScript 的 Windows 应用商店应用定义了三个动画文档对象模型 (DOM) 事件:

animationstart

animationstart 事件发生在动画的开始,必要时还会引起动画延迟(由 animation-delay 属性指定)。负的延迟意味着事件将在一定延迟时间(等于延迟的绝对值)之后才会触发。

animationend

animationend 事件发生于动画完成时。

animationiteration

animationiteration 事件发生在动画的每次迭代的结束。仅当 animation-iteration-count 属性大于一时才发生此事件。

  • 气泡:是
  • 可取消:是

此示例对 <div> 元素进行动画处理且触发 animationendanimationendanimationiteration 事件以更改框中的文本。联机试用示例


<!DOCTYPE html>
<html lang="en-us">
<head>
  <title>CSS Animation Events Example</title>
<style>
  body {
    padding:10px;
    font-family:"Segoe UI";
  }
  div {
    width:250px; 
    background-color:lime;
    padding:10px;
    font-weight:bold;
    font-size:20pt;
  }
  div:active {
    animation-delay: 0s;
    animation-duration: 3s;
    animation-iteration-count: 2;
    animation-name: demo;
  }
  @keyframes demo {
    from {
    animation-timing-function: ease;
    }
    50% {
      background-color: purple;
      animation-timing-function: ease-in;
      transform: translate(20px,30px);
    }
    to {
      background-color: blue;
    }
  }
</style>
</head>
<body>
  <h1>CSS Animation Events Example</h1>
    <p>Click and hold to start the animation. Internet Explorer 10 or later required.</p>
    <div id="mydiv">
      Duis ac leo sit amet lectus tristique pulvinar nec rutrum dolor. Etiam sed ipsum enim, vitae euismod odio. Suspendisse eu.
    </div>

    <script>
      var divObj = document.getElementById("mydiv");
      divObj.addEventListener("animationstart", function (
      ) {
       this.innerHTML = "This is the animation start event";
      }, false);

      divObj.addEventListener("animationend", function () {
        this.innerHTML = "This is the animation end event";
      }, false);

      divObj.addEventListener("animationiteration", function () {
        this.innerHTML = "This is the animation iteration event";
      }, false);

    </script>


</body>
</html>


API 参考

Animations

示例和教程

如何使用 CSS 转换、过渡和动画让你的网页栩栩如生

有关 Internet Explorer 的 Test Drive 演示

实例演示:动画
使用 CSS 转换和动画为你的网页增加活力
Beta Fish IE

IEBlog 文章

通过 CSS3 过渡和动画增添个性
使用 CSS 的整页动画
IE10 中的 CSS3 3D 转换

规范

CSS 动画

相关主题

使用 CSS3 动画构建出色的应用
包含 jQuery 回退的 CSS3 动画

 

 

显示:
© 2014 Microsoft