基于新信息技术的HTML5和CSS3网页设计进阶教程第10章课件

第10章CSS3的动画处理10.1关键帧@keyframes10.2过渡Transition10.3动画Animation10.4动画在页面中的实际应用第10章CSS3的动画处理10.1关键帧@keyfr

CSS3提供了一系列方法和属性，使我们能够创建动画，可以在许多网页中取代动态图片、Flash动画以及JavaScript。

CSS3为动画提供了两个属性：过渡(Transition)和动画(Animation)；一个规则：关键帧(@keyframes)。它们三者之间的关系可以用图10-1简单地表示。

CSS3提供了一系列方法和属性，使我们能够创建动画，可图10-1Transition、Animation、@keyframes之间的关系图10-1Transition、Animation、@k

图10-1所示是由5个关键帧(@keyframes)组成的动画，两个关键帧之间的过渡效果就是一个Trasition。整个动画的全过程，就是一个Animation。为了方便理解，我们可以认为Trasition其实是Animation的一个子集，即一个Animation是由多个Transition组合而成的。

图10-1所示是由5个关键帧(@keyframes)组

10.1关键帧@keyframes

我们知道，动画其实是将事物的变化过程分解为许多动作瞬间的一系列静止的图片，以一定的速度连续展示，给视觉造成动态的艺术。实现由静止到动态，主要是靠人眼的视觉残留效应，而每张静止的图片，我们称之为帧。

10.1关键帧@keyframes

我们知道，动

通过@keyframes，我们能够创建动画的关键帧。原理是将一套CSS样式逐渐变化为另一套样式，在动画过程中能够多次改变这套CSS样式。基本语法如下：

通过@keyframes，我们能够创建动画的关键帧。原

参数说明如下：

● animationname：定义动画的名称。

● keyframes-selector：定义动画时长的百分比。合法的值有0%～100%、from(与0%相同)、to(与100%)相同。

● css-styles：一个或多个合法的CSS样式属性。

参数说明如下：

● animationname：

下面的代码定义了一套动画规则：规则名字为mymove，由5个关键帧组成，并移动4次最终回到起始位置。

下面的代码定义了一套动画规则：规则名字为mymove，

规则定义的关键帧示意图10-2所示。

图10-2规则定义的关键帧示意图

规则定义的关键帧示意图10-2所示。

图10-2规

10.2过渡Transition

Trasition属性提供了从一种状态过渡到另一种状态的渐变方案，通常在鼠标指针浮动到元素上时发生。基本语法如下：

10.2过渡Transition

Trasiti

非常明显，这是一个简写属性，用于设置4个过渡属性：

● transition-property：规定设置过渡效果的CSS属性的名称。

● transition-duration：规定完成过渡效果需要多少秒或毫秒。

● transition-timing-function：规定过渡效果的速度曲线。

● transition-delay：规定过渡效果何时开始。

非常明显，这是一个简写属性，用于设置4个过渡属性：

10.2.1transition-property

transition-property属性规定设置过渡效果的CSS属性的名称。当指定的CSS属性发生改变时，过渡效果将开始。它接收3种值：

●

none：没有属性会获得过渡效果。

●

all：所有属性都将获得过渡效果，默认值。

●

property：定义应用过渡效果的CSS属性名称列表，列表以逗号分隔。

10.2.1transition-property

10.2.2transition-duration

transition-duration属性规定完成过渡效果需要花费的时间，单位可以是秒(s)或毫秒(ms)。需要注意的是，这个属性的默认值是0s，相当于不进行任何过渡转变。因此，请记住每次都要设置transition-duration属性。

10.2.2transition-duration

10.2.3transition-timing-function

transition-timing-function属性规定过渡效果的速度曲线，允许过渡效果随着时间来改变其速度。允许的值有：

● linear：匀速变化。

● ease ：减速变化。

● ease-in：加速变化。

● ease-out：减速变化。

● ease-in-out：先加速再减速变化。

具体速度变化可以参考图10-3。

10.2.3transition-timing-fun图10-3transition-timing-function各参数速度曲线图10-3transition-timing-funct

10.3动画Animation

通过图10-1可知，动画(Animation)实际上是由多个关键帧(keyframe)和过渡到这些关键帧的过渡(Transition)效果组合而成的。可以说，Animation就是Transition的升级效果，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

10.3动画Animation

通过图10-1可

定义一个动画通常分为3步：

●通过@keyframes定义动画的关键帧，即将动画划分为不同的时间段。

●在各关键帧中分别定义各种CSS属性。

●在指定元素里，通过animation属性调用动画。

定义一个动画通常分为3步：

●通过@keyfra

animation属性也是一个简写属性，用于设置6个动画属性：

● animation-name：规定需要绑定到选择器的规则(@keyframes)名称。

● animation-duration：规定完成动画所花费的时间。

● animation-timing-function：规定动画的速度曲线。

● animation-delay：规定在动画开始之前的延迟。

● animation-iteration-count：规定动画应该播放的次数。

● animation-direction：规定是否应该轮流反向播放动画。

animation属性也是一个简写属性，用于设置6个动

10.3.1animation-name

animation-name属性的值为@keyframes规则的名称，也可以理解为该属性的作用是设置动画执行的规则。

10.3.2animation-duration

animation-duration属性定义动画完成一个周期(0%～100%)所需要的时间，值的单位可以是秒(s)或毫秒(ms)。与Transition一样，这个属性的默认值是0s，相当于不进行任何过渡转变。因此，请记住每次都要设置animation-duration属性。

10.3.1animation-name

anim

10.3.3animation-timing-function

animation-timing-function属性规定动画的速度曲线，定义动画从一套CSS样式变为另一套所用的时间。速度曲线用于使变化更为平滑。其允许的值和Transition一样：

● linear：匀速变化。

● ease：减速变化。

● ease-in：加速变化。

● ease-out：减速变化。

● ease-in-out：先加速再减速变化。

具体速度变化可以参考图10-3。

10.3.3animation-timing-func

10.3.4animation-delay

animation-delay属性定义动画何时开始，值的单位可以是秒(s)或毫秒(ms)。此属性允许负值，-2s表示使动画马上开始，但跳过动画的前2秒。

10.3.5animation-iteration-count

animation-iteration-count属性规定动画的播放次数，接收的值有两种：

● n：具体的整数，即定义动画播放次数的数值。

● infinite：规定动画无限次播放，即无限循环动画。

10.3.4animation-delay

ani

10.3.6animation-direction

animation-direction属性规定是否应该轮流反向播放动画。它有两个值可以选择：

● normal：动画应该正常播放，默认值。

● alternate：动画应该轮流反向播放。

如果animation-direction值是“alternate”，则动画会在奇数次数(1、3、5等)正常播放，而在偶数次数(2、4、6等)反向播放，即按照设置的路径逆向返回初始值。需要注意的是，如果把动画设置为只播放一次，则该属性没有效果。

10.3.6animation-direction

10.3.7animation-play-state

animation-play-state属性规定动画正在运行还是暂停。可以在JavaScript或是某些伪类选择器(如hover)中使用该属性，这样就能在播放过程中暂停动画。

它有两个值可以选择：

● paused：规定动画暂停。

● running：规定动画播放。

10.3.7animation-play-state

10.3.8animation-fill-mode

animation-fill-mode属性规定动画在播放之前或之后，其动画效果是否可见。此属性的值是由逗号分隔的一个或多个填充模式关键词，包括：

●

none：不改变默认行为。

●

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

●

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

●

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

10.3.8animation-fill-mode

10.4动画在页面中的实际应用

动画效果在页面中能极大地提升用户体验度，给用户一种酷炫的感觉。而用户体验才是前端工程师应该更加关注的问题。动画效果一般和CSS3变形处理一起使用，接下来以第9章整体3D转换的示例为基础添加动画效果，让整个图形3D旋转，得到更加酷炫的效果。

10.4动画在页面中的实际应用

动画效果在页面中

代码参考9.3节中的代码，页面实际显示效果如图10-4所示。

图10-4应用3D转换效果的页面

代码参考9.3节中的代码，页面实际显示效果如图10-4基于新信息技术的HTML5和CSS3网页设计进阶教程第10章课件感谢感谢28谢谢，精品课件资料搜集谢谢，精品课件资料搜集29第10章CSS3的动画处理10.1关键帧@keyframes10.2过渡Transition10.3动画Animation10.4动画在页面中的实际应用第10章CSS3的动画处理10.1关键帧@keyfr

CSS3提供了一系列方法和属性，使我们能够创建动画，可以在许多网页中取代动态图片、Flash动画以及JavaScript。

CSS3为动画提供了两个属性：过渡(Transition)和动画(Animation)；一个规则：关键帧(@keyframes)。它们三者之间的关系可以用图10-1简单地表示。

CSS3提供了一系列方法和属性，使我们能够创建动画，可图10-1Transition、Animation、@keyframes之间的关系图10-1Transition、Animation、@k

图10-1所示是由5个关键帧(@keyframes)组成的动画，两个关键帧之间的过渡效果就是一个Trasition。整个动画的全过程，就是一个Animation。为了方便理解，我们可以认为Trasition其实是Animation的一个子集，即一个Animation是由多个Transition组合而成的。

图10-1所示是由5个关键帧(@keyframes)组

10.1关键帧@keyframes

我们知道，动画其实是将事物的变化过程分解为许多动作瞬间的一系列静止的图片，以一定的速度连续展示，给视觉造成动态的艺术。实现由静止到动态，主要是靠人眼的视觉残留效应，而每张静止的图片，我们称之为帧。

10.1关键帧@keyframes

我们知道，动

通过@keyframes，我们能够创建动画的关键帧。原理是将一套CSS样式逐渐变化为另一套样式，在动画过程中能够多次改变这套CSS样式。基本语法如下：

通过@keyframes，我们能够创建动画的关键帧。原

参数说明如下：

● animationname：定义动画的名称。

● keyframes-selector：定义动画时长的百分比。合法的值有0%～100%、from(与0%相同)、to(与100%)相同。

● css-styles：一个或多个合法的CSS样式属性。

参数说明如下：

● animationname：

下面的代码定义了一套动画规则：规则名字为mymove，由5个关键帧组成，并移动4次最终回到起始位置。

下面的代码定义了一套动画规则：规则名字为mymove，

规则定义的关键帧示意图10-2所示。

图10-2规则定义的关键帧示意图

规则定义的关键帧示意图10-2所示。

图10-2规

10.2过渡Transition

Trasition属性提供了从一种状态过渡到另一种状态的渐变方案，通常在鼠标指针浮动到元素上时发生。基本语法如下：

10.2过渡Transition

Trasiti

非常明显，这是一个简写属性，用于设置4个过渡属性：

● transition-property：规定设置过渡效果的CSS属性的名称。

● transition-duration：规定完成过渡效果需要多少秒或毫秒。

● transition-timing-function：规定过渡效果的速度曲线。

● transition-delay：规定过渡效果何时开始。

非常明显，这是一个简写属性，用于设置4个过渡属性：

10.2.1transition-property

transition-property属性规定设置过渡效果的CSS属性的名称。当指定的CSS属性发生改变时，过渡效果将开始。它接收3种值：

●

none：没有属性会获得过渡效果。

●

all：所有属性都将获得过渡效果，默认值。

●

property：定义应用过渡效果的CSS属性名称列表，列表以逗号分隔。

10.2.1transition-property

10.2.2transition-duration

transition-duration属性规定完成过渡效果需要花费的时间，单位可以是秒(s)或毫秒(ms)。需要注意的是，这个属性的默认值是0s，相当于不进行任何过渡转变。因此，请记住每次都要设置transition-duration属性。

10.2.2transition-duration

10.2.3transition-timing-function

transition-timing-function属性规定过渡效果的速度曲线，允许过渡效果随着时间来改变其速度。允许的值有：

● linear：匀速变化。

● ease ：减速变化。

● ease-in：加速变化。

● ease-out：减速变化。

● ease-in-out：先加速再减速变化。

具体速度变化可以参考图10-3。

10.2.3transition-timing-fun图10-3transition-timing-function各参数速度曲线图10-3transition-timing-funct

10.3动画Animation

通过图10-1可知，动画(Animation)实际上是由多个关键帧(keyframe)和过渡到这些关键帧的过渡(Transition)效果组合而成的。可以说，Animation就是Transition的升级效果，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

10.3动画Animation

通过图10-1可

定义一个动画通常分为3步：

●通过@keyframes定义动画的关键帧，即将动画划分为不同的时间段。

●在各关键帧中分别定义各种CSS属性。

●在指定元素里，通过animation属性调用动画。

定义一个动画通常分为3步：

●通过@keyfra

animation属性也是一个简写属性，用于设置6个动画属性：

● animation-name：规定需要绑定到选择器的规则(@keyframes)名称。

● animation-duration：规定完成动画所花费的时间。

● animation-timing-function：规定动画的速度曲线。

● animation-delay：规定在动画开始之前的延迟。

● animation-iteration-count：规定动画应该播放的次数。

● animation-direction：规定是否应该轮流反向播放动画。

animation属性也是一个简写属性，用于设置6个动

10.3.1animation-name

animation-name属性的值为@keyframes规则的名称，也可以理解为该属性的作用是设置动画执行的规则。

10.3.2animation-duration

animation-duration属性定义动画完成一个周期(0%～100%)所需要的时间，值的单位可以是秒(s)或毫秒(ms)。与Transition一样，这个属性的默认值是0s，相当于不进行任何过渡转变。因此，请记住每次都要设置animation-duration属性。

10.3.1animation-name

anim

10.3.3animation-timing-function

animation-timing-function属性规定动画的速度曲线，定义动画从一套CSS样式变为另一套所用的时间。速度曲线用于使变化更为平滑。其允许的值和Transition一样：

● linear：匀速变化。

● ease：减速变化。

● ease-in：加速变化。

● ease-out：减速变化。

● ease-in-out：先加速再减速变化。

具体速度变化可以参考图10-3。

10.3.3animation-timing-func

10.3.4animation-delay

animation-delay属性定义动画何时开始，值的单位可以是秒(s)或毫秒(ms)。此属性允许负值，-2s表示使动画马上开始，但跳过动画的前2秒。

10.3.5animation-iteration-count

animation-iteration-count属性规定动画的播放次数，接收的值有两种：

● n：具体的整数，即定义动画播放次数的数值。

● infinite：规定动画无限次播放，即无限循环动画。

10.3.4animation-delay

ani

10.3.6animation-direction

animation-direction属性规定是否应该轮流反向播放动画。它有两个值可以选择：

● normal：动画应该正常播放，默认值。

● alternate：动画应该轮流反向播放。

如果animation-direction值是“al