HTML5 页面上的 CSS3 动画

• 下载源码 - 772.9 KB
• 下载作业解决方案 - 773.5 KB

引言

本文是12篇文章系列中的第五篇，该系列将带我们学习 HTML5 和 CSS3。

本文旨在介绍以下概念

• 使用 HTML5 音频和视频标签
• CSS3 文本效果（轮廓、阴影、换行等）
• CSS3 过渡
• CSS3 2D 和 3D 变换
• CSS3 动画

我们中间还有一些作业。

• 作业 1 - 使用阴影创建 3D 文本效果
• 作业 2 - 悬停时创建霓虹文本效果
• 作业 3 - 使用阴影创建嵌入式文本样式
• 作业 4 - 使用 CSS 动画创建横幅
• 作业 5 - 使用 CSS 动画创建计时器

背景

与 HTML 和 CSS 基础知识相关的文章将有助于更好地理解本文。以下是链接。

• HTML 和 CSS 入门 - 第 1/12 部分
• HTML5 & CSS3 初学者指南 - 第 2/12 部分（链接 James Jensen 的文章），
• HTML 和 CSS 入门 - 第 3/12 部分
• HTML 和 CSS 入门 - 第 4/12 部分 - 构建您的第一个网页

使用 HTML5 音频和视频标签

HTML5 引入了原生支持，可以在我们的页面上包含音频和视频文件，而无需 Flash 等插件。我们大多数人会同意，依赖插件来传输媒体并不是最周全的方式。

让我们看看下面的每个标签

音频

HTML5 使用 `

`

HTML5 为 Audio 元素定义了许多属性。在尝试一些示例之前，让我们先看看这个标签最常用的属性。

现在，虽然 HTML5 音频标签得到了许多主流浏览器的支持，但我们仍然需要考虑当标签或音频类型不受支持时的处理方案。

第一种情况是当我们指定特定类型（例如 mp3）的音频源且浏览器不支持时，在这种情况下，我们可以做两件事。

如果您有多种格式的音频，那么我们可以指定多个源，每个源都指向同一个音频。在这种情况下，会创建新的嵌套元素 ``，并带有 src 属性，而不是在 Audio 标签中定义 src 属性。将使用第一个被识别和支持的格式。

以下是一些关于如何包含多个和单个音频源的示例。

Single
<audio id="audio1" controls source src=“Audio/Kalimba.ogg” type=”audio/ogg”/>

多个
<audio id="audio1" controls>
<source src=“Audio/Kalimba.ogg” type=”audio/ogg”>
<source src=“Audio/Kalimba.mp3” type=”audio/mp3”>
</audio>

现在，如果浏览器根本不支持 Audio 标签，我们是否仍然需要一个备用方案呢？

有两种方法可以处理这个问题。

1. 简单地告知用户此浏览器不支持音频，并提及支持此功能的浏览器。如下所示。

2. 退回到使用媒体播放器等插件的传统方式。这可以通过不同的方式完成，但是为了保持简单，我将展示在 HTML 中完成此操作的最简单方法。

为此，我们可以在 Audio 标签内的 Source 标签之后包含一个媒体播放器对象。当浏览器不识别 Audio 标签时，它会将内容嵌入到 object 标签中。以下是代码和此工作原理的屏幕截图。

<h2>Audio</h2>
<audio controls>
    <source src="Audio/kalimba.ogg">
    <source src="Audio/kalimba.mp3">
<object id="audioPlayer">
<param name="filename" value="./Audio/kalimba.mp3"> 
     <embed src="./Audio/kalimba.mp3" width="300" height="40"/>
    </object>
</audio>

视频

HTML5 通过 `

• Poster：在视频下载和用户决定播放视频之前显示一张图片。如果缺失，将显示视频的第一帧。
  • 语法：poster = "有效的图片文件名"
  • 示例：<video controls poster="./images/photo1.jpg">

让我们看一个例子。在下面的例子中，我们实现了与音频相同的回退。当您在 Chrome 中运行此代码时，您将看到 Rajni.mp4 播放，因为 Chrome 不支持 Wildlife.avi。

<h2>Video</h2>
<video controls width="500" height="350" poster="./images/photo1.jpg">
    <source src="Video/Wildlife.avi">
    <source src="Video/Rajni.mp4">
<object id="mediaplayer">
<param name="filename" value="./Video/Wildlife.avi">
     <embed src="./Video/Wildlife.avi" width="500" height="350"/>
</object>
</video>

结果

CSS3 文本效果

在之前的课程中，我们了解了如何对文本应用一些装饰和效果，使我们的页面看起来更具吸引力。

今天我们将了解一些更重要的文本效果，以及如何使用它们来美化我们的网页。

我们将学习和实验的主要文本效果是

1. 文本换行
2. 文本溢出
3. 文本转换
4. 文本阴影

文本换行

此属性可以取 4 个值。Text-Wrap 尚未在任何浏览器中受支持，因此我们可能无法尝试所有值。但是，下面是这些值及其解释

• normal - 仅允许在断点处换行
  • 用法: text-wrap: normal;
• none - 不允许换行。不适合元素内的文本将溢出
  • 用法: text-wrap: none;
• unrestricted - 可以在任意两个字符之间换行
  • 用法: text-wrap: unrestricted;
• suppress - 元素内禁止换行。只有当行中没有其他有效断点时，浏览器才可能在元素内换行。
  • 用法: text-wrap: suppress;

以下是 Text-wrap 设置为 normal 的屏幕。您会看到，只要可以换行，它就会换行，但长单词不得不溢出。

文本溢出

现在，文本超出边界的溢出效果确实不好，那么我们能做些什么让它看起来更好呢？首先，我们应该将 div 的 overflow 属性设置为 hidden，这样我们就看不到这种情况了。

这样一来，问题在于用户永远不会知道有很长的文本，因此我们使用新的 HTML5 属性，名为 **Text-overflow**。text overflow 接受以下值，我们有示例演示了其中一些值的结果。

• clip - 默认值。剪裁文本
• ellipsis - 在行尾添加省略号 ("...") 以指示还有更多文本
• string - 添加给定字符串以表示剪裁的文本

让我们尝试这些……下面是设置 text-overflow 值效果的代码和屏幕截图。

<span style="text-overflow:clip;overflow:hidden; border:2px dashed red;width:200px;margin:10px;padding:10px;">Clip : sample text for testing some text effects including text wrap, outline and shadows. A-LooooooooooooooooooooooooooooooooooooooooooooooooooooooooooongWordddddddddddd</span>

span style="text-overflow:ellipsis;border:2px dashed yellow;overflow:hidden;width:200px;margin:10px;padding:10px;">Ellipsis: sample text for testing some text effects including text wrap, outline and shadows. A-LooooooooooooooooooooooooooooooooooooooooooooooooooooooooooongWordddddddddddd</span>

文本转换:

文本转换是所有文本效果中最简单的，它只是指定如何将元素的文本大写。它通常用于将标题中的所有字母转换为大写，或将语句中的每个单词首字母大写。它也支持所有小写。下面是此属性接受的值及其描述。

• capitalize - 将每个单词的首字母大写。
• uppercase - 强制所有字母转换为大写。
• lowercase - 强制所有字母转换为小写。

示例

<div>style="text-transform:capitalize : <span style="border: 1px dashed yellow; font-weight: bold; text-transform: capitalize">capitalize</span></div>
<div>style="text-transform:lowercase : <span style="border: 1px dashed red; text-transform: lowercase; font-weight: bold;">LOWERCASE</span></div>
<div>style="text-transform:uppercase : <span style="border: 1px dashed yellow; text-transform: uppercase; font-weight: bold;">uppercase</span></div>

结果

文本阴影

文本阴影是网页设计师最受欢迎的文本效果之一，可让他们的文本引人注目。text-shadow 属性可以帮助我们非常轻松地实现 Photoshop 般的阴影效果。使用阴影，我们可以增加深度、维度，并使元素从页面中浮起，从而吸引用户的注意力。

文本阴影属性易于理解和使用。下面是语法。

text-shadow:X-offset Y-offset Blur-Radius Color {, X-offset Y-offset Blur-Radius Color{,..}} ; 

X-Offset：此长度值将定义您的阴影在文本下方向左（负值）或向右（正值）放置的距离

Y-Offset：此长度值将定义您的阴影在文本下方（正值）或上方（负值）放置的距离

Blur-Radius：这是一个长度值，默认值为 0。该值越高，模糊越大；阴影变得更宽更亮。

颜色：这指定了阴影的颜色。

一个简单的例子。

<div style="text-shadow: 6px/*X-Offset*/ -9px/*Y-Offset*/ 1px/*Blur Radius*/ white/*Shadow Color*/; color: black; font-weight: bold;">Text Shadow</div>

结果:

在上面的语法中，我们还看到了这些值用逗号分隔的重复。这意味着我们可以有无数个具有不同位置、颜色和模糊半径的阴影。让我们在我们的示例中添加另一个阴影，具有更大的模糊度并将其放置在文本下方。

<div style="text-shadow: 6px/*X-Offset*/ -9px/*Y-Offset*/ 1px/*Blur Radius*/ white/*Shadow Color*/, 6px/*X-Offset*/ 9px/*Y-Offset*/ 5px/*Blur Radius*/ red/*Shadow Color*/; color: black; font-weight: bold;">Text Shadow</div>

结果

通过一些创意，我们可以使用文本阴影创建很酷的效果，其中一个著名的效果是火焰文本效果。让我们看看如何创建一个。

要制造火焰，我们需要四样东西，在这里，它们是颜色。它们是白色、黄色、一些橙色和红色。让我们按照这个顺序将它们放在阴影属性中。

<div style="margin-left:30px; color: #fff;
    text-shadow:
    0px -1px 0px white,
    0px -2px 0px yellow,
    0px -10px 0px #ff8000,
    0px -18px 0px red;font-size:80px">
On Fire, pretty hot</div>

我们会看到类似下面的效果

现在让我们模糊这些阴影，看看会发生什么，请记住火焰的颜色应该逐渐褪去。为了实现这一点，我们将逐渐增加模糊半径。我们将从 4 像素增加到 40 像素的模糊半径。

<div style="margin-left:30px; color: #fff;
    text-shadow:
    0px -1px 4px white,
    0px -2px 10px yellow,
    0px -10px 20px #ff8000,
    0px -18px 40px red;font-size:80px">
On Fire, pretty hot</div>

结果，非常火爆！！ ;)

作业

我可能会继续谈论我们可以用 text-shadow 做些什么，但让我们尝试将以下内容作为作业。我确信您会喜欢解决这个问题，如果您时间不够，请参阅随附的解决方案，其中包含了以下问题的答案。

作业 1

创建 3D 文本，结果应如下图所示。在样式选择器中使用 :hover，以便 3D 效果仅在您将鼠标悬停在文本上方时出现。

作业 2

创建霓虹文本，结果应如下图所示。在样式选择器中使用 :hover，以便霓虹效果仅在您将鼠标悬停在文本上方时出现。

作业 3

为您的文本创建简单的嵌入效果。结果如下。

CSS3 过渡

一些 CSS 属性是可动画的，这意味着我们可以在动画和过渡中使用这些属性。听起来很棒，但是如何实现呢？

让我们在本节中讨论过渡，稍后讨论动画。那么什么是过渡呢？

嗯，谷歌差点猜对了，但它不知道我们说的是 CSS-ish 而不是英语 :)

在 CSS 中，过渡简单地说是一种效果，它让元素从一种样式逐渐改变到另一种样式。我们如何使用它呢？

要做到这一点，您必须指定两件事

• transition-property : 您要添加效果的 CSS 属性
• transition-duration: 效果的持续时间，默认值为 0，0 将没有效果。

还有另外 2 个可选项目可以指定

• transition-timing-function: 指定过渡效果的速度曲线的属性。有一些预定义的属性如下。
  • ease: 默认值。过渡效果开始缓慢，逐渐加速，然后像钟形曲线一样缓慢结束。
  • linear: 过渡从开始到结束以相同的速度发生
  • ease-in: 过渡效果开始缓慢，逐渐加速直到结束。
  • ease-out: 过渡效果缓慢结束。
  • ease-in-out: 指定缓慢开始和结束的过渡效果。
• transition-delay: transition-delay 属性指定过渡效果何时开始。

以上每个属性都可以像下面这样单独定义。

transition-property:width;
transition-duration:2s;
transition-timing-function: linear;
transition-delay: 2s;

或者可以用简写方式定义：如下所示。

transition:width 1s linear 2s;

让我们看一个例子。在这个例子中，我们将定义一个宽度为 100 像素的 div，悬停时将其宽度增加到 200 像素，字体大小增加到 40 像素。我们还将对宽度属性应用过渡。

<div id="exTransition">Transition Example</div>

#exTransition
{
    background-color:aliceblue;
    border:3px solid;
    height:100px;
    width:100px;
    font-size:10px;
    text-align:center;
    border-radius:20px;
    transition: width 2s,;
}

#exTransition:hover
{
   width:200px;
   font-size:40px;
}

结果

酷，不是吗？然而，文本突然增大，而宽度逐渐过渡。嗯，我们也可以将过渡应用到 font-size 属性。我们可以将过渡应用到任意数量的属性，用逗号分隔。下面是多属性过渡及其结果的示例。

#exTransition
{
    background-color:aliceblue;
    border:3px solid;
    height:100px;
    width:100px;
    font-size:10px;
    text-align:center;
    border-radius:20px;
    transition: width 2s,font-size 2s;
}

结果

另一个快速示例，展示如何在悬停时显示编辑过的结果图像。在这里，我们以漂亮的过渡效果显示同一图像的黑白版本。

<div id="exTransition2" class="shadow">
<img class="top" src="images/color.jpg" />
<img class="bottom" src="images/BlackNwhite.jpg" />
</div>

#exTransition2 {
  position:relative;
  height:200px;
  width:400px;
  margin:0 auto;
}

#exTransition2 img 
{
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  max-width:100%; max-height:100%
}

#exTransition2 img.top:hover 
{
  opacity:0;
}

结果

CSS3 2D 和 3D 变换

好吧，准备好一些带有 x、y 和 z 的几何学吧……

变换模块主要允许我们变换元素。这里的变换可以指以下之一。

• 平移
• 倾斜
• Scale
• 旋转

在深入了解这些是什么以及如何使用它们之前，让我们先了解一些几何学基础知识。我们将在下面使用简单的几何表示来解释这些变换，请注意这些表示不按比例绘制。

2D 变换

在 2D 平面中，我们将有两个可测量的轴，即 X 和 Y。平面中的任何给定点都可以用 (x,y) 表达式表示，其中 x 和 y 可以是负值、零或正值。下面是我们如何表示相同的内容。

同时，我们还可以相对于原点以度数表示平面上的一个点。原点的默认值将是 (x=0, y=0)，但是平面上的任何点都可以定义为原点。下面是一个关于度数含义及其值在 2D 平面上的分布的快速表示。

现在让我们逐一看看不同的变换方法，在本节中，我们只看 2D 变换，然后我们将进入 3D 部分。

Transform:Translate：在 CSS 上下文中，Translate 表示移动，将元素从一个点移动到另一个点，沿特定方向。该方法接受 2 个值，X 和 Y。如上所示，X 值表示水平轴，它左右移动。Y 轴是垂直轴，它上下移动。

下面是其图片表示。

语法

平移有三种方法，如下所述。然而，第一种方法也能完成其他两种方法能完成的任务。

1. Transform: translate(x,y): 水平移动 x 像素，垂直移动 y 像素

div { 
    width: 100px; 
    height: 100px; 
    transform: translate(10px, 25px); 
}

2. Transform: translateX(x): 水平移动 x 像素

div { 
    width: 100px; 
    height: 100px; 
    transform: translatex(10px); 
}

3. Transform: translateY(y): 垂直移动 y 像素

div { 
    width: 100px; 
    height: 100px; 
    transform: translatey( 25px); 
}

示例：在我们的示例中，我们正在悬停时将 div 从左向右平移，并带有线性过渡。

<div id="exTranslate" style="background-color:aliceblue;border:3px solid;height:100px;width:100px;clear:both" ></div>

#exTranslate:hover
{
    -webkit-transform:translate(600px,0px);
    -webkit-transition: ease-in-out 3s;
}

结果

Transform:Scale: scale 方法允许我们放大或缩小元素，使其偏离原始大小。

缩放的值与上面的平移方法相同，它也包含 X 和 Y，但在这里我们不需要指定单位，因为 X 和 Y 值将与原始 X 和 Y 值相乘。例如，在下面的表示中，我们通过 Transform:scale(2,2) 将大小加倍，通过 Transform:scale(0.5,0.5) 将其缩小一半。

让我们看一个例子，通过在 CSS 中设置 Transform:scale(2,2) 来将 div 的大小加倍，并应用一些过渡。

<div id="exScale" style="background-color:aliceblue;border:3px solid;height:100px;width:100px;clear:both" >Scale</div>
#exScale:hover
{
    -webkit-transform:scale(2,2);
    -webkit-transition: ease-in-out 2s;
}

结果

Transform : Rotate: 旋转方法沿轴旋转给定元素，因此它将使用极坐标而不是 X 轴和 Y 轴。因此，我们将以度数指定值。下面的表示显示了旋转如何工作。当值为负数时，它逆时针旋转。

让我们快速看一个例子。

让我们在悬停时将 div 旋转 90 度，并在此过程中应用过渡。

<div id="exRotate" style="background-color:aliceblue;border:3px solid;height:100px;width:100px;clear:both" >Rotate</div>
#exRotate:hover
{
    -webkit-transform:rotate(90deg);
    -webkit-transition: ease-in-out 2s;
}

结果

Transform :Skew: 使用 `skew` 方法会产生一种平行四边形的效果。它也包含 X 和 Y 轴的两个值。然而，这个值本身是以度数表示的，而不是像我们用于 `scale` 或 `translate` 方法那样的线性测量。下面是度数值如何转换为倾斜角度的表示。同样，图表不按比例绘制，它们仅用于理解概念。

由于这种方法易于理解，我直接在这里给出一个示例。如果您需要更多详细信息，请告诉我。

让我们将 div 倾斜 20 度，并应用类似于上述示例的过渡。

<div id="exSkew" style="background-color:aliceblue;border:3px solid;height:100px;width:100px;clear:both" >Skew</div>
#exSkew:hover
{
    -webkit-transform:skew(20deg);
    -webkit-transition: ease-in-out 2s;
}

结果

3D 变换

我将尝试将本节专门讲解 3D，因为上面 2D 中的许多方法在 3D 中是相同的，只是现在除了 X 和 Y 轴之外，我们还将有一个 Z 轴的维度。

在 2D 空间中，Z 轴值始终为零。

例如，使用 translate 方法，我们现在可以左右移动（沿 X 轴）、上下移动（沿 Y 轴）和前后移动（沿 Z 轴），或者这些的组合。下图将帮助您想象我们 3D 平面上的另一个轴。

旋转和缩放方法也一样。但是，倾斜方法不适用于 3D，因为我们只能在 2 维中倾斜元素。

所以与其解释，不如通过一个例子来理解我们的三维 CSS 世界。

每当我们（至少我自己）想到 3D 图形时，我们都会想到一个立方体，因为它是最简单的，可能也是我们大多数人绘制的第一个 3D 图形。下面是我们如何绘制 3D 立方体。

是不是又简单又有趣？:)

现在您可以看到，这个立方体有 6 个面：前、后、上、下、左和右。

让我们在 HTML 中创建同样的东西，首先添加 6 个 div 来表示 6 个面。我们将添加一个 Div 来像一个块一样包含这些面。由于我们将为每个面应用特定的样式，我们也会给它们分配一些样式类。稍后我们将讨论样式。

<div class="block" style="text-align:center;font-size:40px;">
    <div class="sides  front1">Front</div>
    <div class="sides  back1"><br/>Back</div>
    <div class="sides  left1">Left</div>
    <div class="sides  right1"><br/>Right</div>
    <div class="sides  top1">Top</div>
    <div class="sides  bottom1"><br/>Bottom</div>
</div>

如果你试着看看这些会是什么样子，你可能不会喜欢它，因为你看到的只是侧面名称。

现在让我们为这个块和它的侧面添加一些尺寸、边框、阴影和颜色。

.block
{
    display: inline-block;
    margin-top: 50px;
    width: 300px;
    height: 300px;
    position: relative; 
}

.sides
{
    width: inherit;
    height: inherit;
    position: absolute;
    opacity: 0.7;
    box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.5), 0 0 50px rgba(0, 0, 0, 0.2);
    background: #fff;
    border: 1px solid #000;
}

现在好多了，但它仍然不是 3D。因为，我们所有的 div 都只是一个接一个地堆叠起来。现在让我们对这些面的方向做一些改变。

我们需要让前面向前移动 150 像素，后面向后移动 150 像素（即 -150 像素），这样它们就形成了 300 像素 Z 轴平面上的前后边缘。

.front1
{
    -webkit-transform: translate3d(0, 0, 150px);
}

.back1
{
    -webkit-transform: rotateY(180deg) translate3d(0, 0, 150px); //x=0,y=0 and z=150
}

请注意，我们首先将背面沿 Y 轴旋转 180 度，然后向前移动 150 像素。这样，背面将朝向立方体外部而不是内部。

现在让我们对顶部和底部做同样的事情。这里唯一的区别是，我们需要分别沿 X 轴将顶部和底部旋转 90 度和 -90 度，然后移动 150 像素。这将使它们形成 300 像素 Y 轴（垂直）平面的边缘。

.top1
{
    -webkit-transform: rotateX(90deg) translate3d(0, 0, 150px);
}
.bottom1
{
    -webkit-transform: rotateX(-90deg) translate3d(0, 0, 150px);
}

我们现在对左侧和右侧重复相同的操作，但将它们都沿 Y 轴旋转 -90 度。

.left1
{
    -webkit-transform: rotateY(-90deg) translate3d(0, 0, 150px);
}
.right1
{
    -webkit-transform: rotateY(90deg) translate3d(0, 0, 150px);
}

即使添加了所有这些，我们仍然看不到 3D 图像，不是吗？

那是因为如果我们不定义这个元素距离视图多远，它看起来永远都是一个 2D 空间。下面是用来指定相同内容的属性。

透视：透视属性定义了一个 3D 元素距离视图有多少像素。这个属性允许你改变 3D 元素的视角。当为一个元素定义透视属性时，是子元素获得了透视视图，而不是元素本身。

现在让我们也将整个内容包装在一个名为 wrapper 的 div 中，以便子元素获得透视效果，并为 wrapper 类添加一个 perspective 属性。

.wrapper
{
    display: inline-block;
    margin-top: 50px;
    width: 300px;
    height: 300px;
    -webkit-perspective: 1200;
 }

.block
{
    position: relative;
    width: inherit;
    height: inherit;
}

下面是现在的样子。

看起来太棒了，不是吗？等等；这里还有更多精彩。

现在，如果我们悬停时沿 X 轴旋转这个块会怎么样？

让我们尝试使用我们之前学到的旋转和过渡。

.block:hover
{
    -webkit-transform: rotateX(360deg);
    -webkit-transition: all 6.0s linear;
}

下面是结果。

嗯，还是没看到我们想要的，不是吗？

同样，CSS 在这里帮助我们通过使用名为 -webkit-transform-style 的属性来保留我们构建的 3D 效果。

transform-style：transform-style 属性指定嵌套元素如何在 3D 空间中呈现。其值可以是 flat 或 preserve-3d。flat 是默认值，将导致我们上面看到的效果，所以我们需要 preserve-3d。

让我们将此属性和值添加到 Block 和 Wrapper 类中。

-webkit-transform-style: preserve-3d;

现在让我们看看我们得到了什么……

太棒了！！

就这样。这就是通过实践学习 3D 变换。

CSS3 动画

是的，你没看错。现在您可以使用 CSS3 进行动画。这可以取代我们过去用于在页面上实现动画效果的 Flash 动画、GIF 图片和 JavaScript。

下面是我们过去在一些无聊的讲座中创建动画的方式，不是吗？

通过它，我们知道动画无非是以一定的速度按顺序显示不同的帧。

CSS3 秉持同样的理解，并定义了以下帮助我们创建动画的元素。

@keyframes:

将关键帧视为定义动画动作的规则。在动画过程中，我们可以更改样式，并且可以多次更改。

在关键帧内，我们可以使用百分比来指定更改何时生效，其中 0% 是动画的开始，100% 是动画的结束。

下面是 CSS 关键帧的语法。

@keyframes animationname {keyframes-selector {css-styles;}}

以上所有属性都是必需的，以下是属性描述

• 动画名称：这是动画的标识符
• 关键帧选择器：动画持续时间的百分比。它可以有 0-100% 或 From&To 的值。一个动画/关键帧内可以有任意数量的选择器。
• css-styles：将应用的 CSS 样式属性。

示例：在下面的动画中，我们将元素上下左右移动。

@keyframes mymove

{
0%   {top:0px;left:0px}
25%  {top:200px;left:10px}
50%  {top:100px;left:20px}
75%  {top:200px;left:10px}
100% {top:0px;left:0px}
}

现在我们已经定义了动画，如何将其应用到我们的元素中。这很简单。我们有一个名为 animation 的属性可以帮助实现这一点。详细信息如下。

Animation：此属性是下面 8 个属性的简写形式

1. animation-name : 需要应用的动画/关键帧的名称
2. animation-duration : 所有已定义动画发生时的持续时间
3. animation-timing-function : 动画的速度曲线 – 请参阅 transition-timing-function，它具有此属性可以采用的相同值。
4. animation-delay : 动画开始前的延迟
5. animation-iteration-count : 动画应播放的次数，无限为最大值。（强烈注意：您不允许给出高于无限的值；））
6. animation-direction : 指定动画是否应在交替周期中反向播放
7. animation-fill-mode : 指定动画在执行时间之外应用的值
8. animation-play-state : 指定动画是正在运行还是已暂停

上面的大多数属性都是不言自明的。我将尝试快速描述一些不清楚的属性。

动画方向：此属性可以采用以下值之一。这些值及其描述如下

1. 正常：这是默认值。
2. 反向：动画反向播放
3. 交替：动画每奇数次（1,3,5 等）正常播放，每偶数次（2,4,6 等）反向播放
4. 交替反向：动画每奇数次（1,3,5 等）反向播放，每偶数次（2,4,6 等）正常播放

动画- 播放状态：以下是值及其描述。

1. paused：指定动画已暂停
2. running：默认值。指定动画正在运行

现在让我们尝试一个例子，一个简单的例子，因为本文的篇幅已经超出了控制范围。我将尝试在我的源代码中包含更多例子。

在上一节中我们创建了一个漂亮的立方体。让我们使用它并对其进行动画处理，使其沿 X 轴和 Y 轴无限旋转。但在此之前，让我们把我们心爱的 BOB 放在立方体的中间。

为了让 Bob 位于中间，我们只需要在 (0,0,0) //(x,y,z) 处再创建一个 div，其中包含 Bob 的图像。代码如下。

<div class="sides  vermid1"><img style="margin-top:100px;opacity:1.0;" src="images/bob.png" /></div>
.vermid1
{
    -webkit-transform: translate3d(0, 0, 0px);
    border:none;
    box-shadow:none;
    background-color:transparent;
}

现在让我们定义关键帧

@-webkit-keyframes block
{
    50%
    {
         -webkit-transform: rotateX(360deg);
    }
    51%
    {
         -webkit-transform: rotateY(360deg);
    }
}

现在将此动画应用于 block 类

.block
{
    position: relative;
    width: inherit;
    height: inherit;
    -webkit-transition: transform 0.6s;
    -webkit-transform-style: preserve-3d;
    -webkit-animation-duration:3s;
    -webkit-animation-timing-function:linear;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-name: block;
    -webkit-animation-play-state: running;
    -webkit-animation-direction: alternate-reverse;
}

就是这样。让我们看看我们的 Bob 对他的新座驾感觉如何……

Bob 看起来很喜欢，你呢？？

如果喜欢，那我们做两个作业。如果您遇到困难，上面包含了解决方案。

作业 4

使用 CSS3 动画和过渡为您的网站创建横幅。下面是我在解决方案中的一些内容，但您可以添加任何您喜欢的内容。

提示：使用 animation-delay 属性

作业 5

创建一个秒表来显示在页面上花费的时间。

提示：使用 Overflow:hidden 属性来隐藏超出框架的数字。下面是解决方案中的内容。

厂商前缀

请注意，我使用了所有 -webkit- 属性，因为我正在使用 Chrome 进行测试。我的所有作业和解决方案都只适用于 Chrome。但是有一些简单的修复方法可以避免在我们的 CSS 样式表中添加前缀。

其中一个例子是 PrefixFree (http://leaverou.github.io/prefixfree/)。这个轻量级 JavaScript 会在加载时将所有属性替换为带有前缀的版本。然而，这对于静态页面或本地页面不起作用。因此，我的示例中没有使用它，也因此，我的示例和解决方案仅限于 Chrome。

关注点

写这篇文章是一种乐趣，最具挑战性的部分是停止玩各种动画，专注于完成文章。我相信你们都会喜欢它。

尽管我缺乏创造力，但我的在线社区朋友们发布了大量可以借鉴的创意。我从许多来源借鉴了立方体和时钟的创意，我非常感谢他们分享知识和专业的努力。

使用代码

上面有两个 Zip 文件。一个是包含示例的初始页面，第二个是本文作业的解决方案。

下载 Zip 文件并解压。您就可以在 Chrome 中查看这些页面了。由于时间限制，我只添加了特定于 Chrome 的带厂商前缀的样式。玩得开心！

另请注意，我没有包含音频和视频文件，以保持源文件大小较小。请将您自己的音频视频文件添加到源 html 中，并使用相应的名称。