与动画相关的CSS属性
本文解释了与动画相关的CSS属性。
您可以了解 @keyframes、animation 和 transition 属性的用法和语法。
YouTube Video
预览的HTML
css-animation.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-animation.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Animation</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>Animation Related Properties</h2>
20 </header>
21 <article>
22 <h3>@keyframes</h3>
23 <section>
24 <h4>Animation Examples</h4>
25 <header><h4>animation: slide 3s ease infinite</h4></header>
26 <section class="sample-view">
27 <div class="box-animation-slide">Slide Box</div>
28 </section>
29 <header><h4>animation: color-change 3s ease infinite</h4></header>
30 <section class="sample-view">
31 <div class="box-animation-color-change">Color Change Box</div>
32 </section>
33 <header><h4>animation: fade 3s ease infinite</h4></header>
34 <section class="sample-view">
35 <div class="box-animation-fade">Fade Box</div>
36 </section>
37 </section>
38 </article>
39 <article>
40 <h3>animation</h3>
41 <section>
42 <h4>Animation Examples</h4>
43 <header><h4>animation: slide 3s ease-in-out infinite</h4></header>
44 <section class="sample-view">
45 <div class="box-animation-ease-in-out">Slide Box</div>
46 </section>
47 <header><h4>animation: color-change 3s ease-in-out 1s 3 alternate</h4></header>
48 <section class="sample-view">
49 <div class="box-animation-alternate">Color Change Box</div>
50 </section>
51 </section>
52 </article>
53 <article>
54 <h3>transition</h3>
55 <section>
56 <h4>Transition Examples</h4>
57 <header><h4>transition: background-color 2s ease</h4></header>
58 <section class="sample-view">
59 <div class="transition-box">Hover me!</div>
60 </section>
61 <header><h4>transition: background-color 5s ease, width 0.5s ease-in</h4></header>
62 <section class="sample-view">
63 <div class="transition-2-properties">Hover me!</div>
64 </section>
65 </section>
66 </article>
67 </main>
68</body>
69</html>动画与过渡
@keyframes 规则
1/* Animation definition */
2@keyframes slide {
3 0% {
4 transform: translateX(0);
5 }
6 50% {
7 transform: translateX(200px);
8 }
9 100% {
10 transform: translateX(0);
11 }
12}
13
14/* Apply the animation */
15.box-animation-slide {
16 width: 100px;
17 height: 100px;
18 background-color: skyblue;
19 animation: slide 3s ease infinite;
20}@keyframes 在CSS动画中用于指定动画过程中样式如何变化。在 @keyframes 中，动画从开始到结束的样式变化通过时间百分比或关键字（from 和 to）来指定。
- 这是一个元素从左向右滑动再返回原始位置的动画示例。
- 在此示例中，
@keyframes后写入slide，定义了一个名为slide的动画。 0%是动画的开始，使用translateX(0)将元素放置在其原始位置。50%是动画的中途，通过使用translateX(200px)将元素向右移动200像素。100%是动画的结束，元素返回到其原始位置。- 在
box-animation-slide类中，使用animation属性以3秒的间隔应用slide动画。
1@keyframes color-change {
2 0% {
3 background-color: red;
4 }
5 25% {
6 background-color: blue;
7 }
8 50% {
9 background-color: green;
10 }
11 75% {
12 background-color: yellow;
13 }
14 100% {
15 background-color: red;
16 }
17}
18
19.box-animation-color-change {
20 width: 100px;
21 height: 100px;
22 background-color: skyblue;
23 animation: color-change 3s ease infinite;
24}- 您可以在动画过程中细致地控制样式。通过指定百分比，您可以在任意时间点应用不同的样式。
- 在此示例中，颜色逐渐从红色变为蓝色、绿色、黄色，再返回红色。
1@keyframes fade {
2 from {
3 opacity: 0;
4 }
5 to {
6 opacity: 1;
7 }
8}
9
10.box-animation-fade {
11 width: 100px;
12 height: 100px;
13 background-color: blue;
14 animation: fade 3s ease infinite;
15}- 在此示例中，
from等同于0%，而to等同于100%。这使您可以定义简单的动画。
基本语法
1@keyframes animation-name {
2 0% {
3 /* Style at the start */
4 }
5 50% {
6 /* Style at the midpoint */
7 }
8 100% {
9 /* Style at the end */
10 }
11}animation-name：动画的名称。这是使用animation属性或animation-name属性来指定的。- 百分比或关键字：使用从
0%到100%的百分比，或关键字from（等同于0%）和to（等同于100%）。
animation 属性
1.box-animation-ease-in-out {
2 width: 100px;
3 height: 100px;
4 background-color: skyblue;
5 animation: slide 3s ease-in-out infinite;
6}animation属性用于将动画应用于一个元素。动画定义了一组CSS样式如何随时间变化。通过animation属性，您可以控制动画的时间、行为、延迟、重复次数等。
box-animation-ease-in-out类将slide指定为animation-name，并使用在@keyframes中定义的slide动画。3s是animation-duration，表示每个动画周期在3秒内完成。ease-in-out是animation-timing-function，会使动画以缓慢开始，加速，然后在结束时再次减速。infinite是animation-iteration-count，表示动画将无限重复。
1.box-animation-alternate {
2 width: 100px;
3 height: 100px;
4 background-color: skyblue;
5 animation: color-change 3s ease-in-out 1s 3 alternate;
6}box-animation-alternate类将color-change指定为animation-name，并使用在@keyframes中定义的color-change动画。ease-in-out后面的1s是animation-delay，指定动画开始前的延迟时间。动画将在1秒后开始。1s后面的3是animation-iteration-count，表示动画重复3次。alternate是animation-direction，指定动画播放方向。alternate指定动画交替播放。
animation属性的组成
animation属性是一个简写属性，将多个子属性组合成一个。以下是主要的子属性：。
animation-name属性：指定要应用的动画名称。它必须与在@keyframes中定义的动画名称匹配。animation-duration属性：指定动画完成一个周期所需的时间。时间单位为秒（s）或毫秒（ms）。animation-timing-function属性：指定动画的速度曲线。可以使用ease、linear、ease-in、ease-out、ease-in-out等值。- 指定
ease时，动画将缓慢开始，加速，然后在结束时再次减速。 - 指定
linear时，动画将以恒定的速度从开始到结束。 - 指定
ease-in表示动画以较慢速度开始并以较快速度结束。 - 指定
ease-out表示动画以较快速度开始并以较慢速度结束。 - 指定
ease-in-out表示动画以较慢速度开始，随后加速进行，最后以较慢速度结束。
- 指定
animation-delay属性用于指定动画开始前的延迟时间。时间单位可以是秒或毫秒。animation-iteration-count属性用于指定动画重复的次数。指定infinite表示动画将无限次重复。animation-direction属性用于指定动画的播放方向。选项包括normal（正向播放）、reverse（反向播放）、alternate（交替播放）和alternate-reverse（从反向开始交替播放）。animation-fill-mode属性用于指定动画在开始前和结束后处于的状态。可以指定为none、forwards、backwards或both。animation-play-state属性用于指定动画是运行状态还是暂停状态。可以指定为running或paused。
总结
animation 属性是一个强大的工具，用于动态更改元素的样式。通过使用 @keyframes，您可以定义样式随时间的变化方式，并通过 animation 的各子属性控制动画的具体行为。
transition 属性
1.transition-box {
2 background-color: lightgray;
3 transition: background-color 2s ease;
4}
5
6.transition-box:hover {
7 background-color: steelblue;
8}
9
10.transition-2-properties {
11 background-color: lightgray;
12 width: 150px;
13 height: 50px;
14 transition: background-color 5s ease, width 0.5s ease-in;
15}
16
17.transition-2-properties:hover {
18 background-color: blue;
19 width: 250px;
20}transition 属性用于为 CSS 样式的变化应用动画效果。它允许在状态发生变化时（如 hover、focus、active 或通过 JavaScript 动态更改样式时），使变化效果平滑。
我们来看一个 transition-box 类的示例，其中在按钮悬停时，背景颜色会平滑地变化。
- 在 transition-box 类中，transition 属性为背景颜色的变化设置了2秒的过渡效果。这种变化被指定为 ease，使其平滑过渡。
- hover 伪类在鼠标悬停在按钮上时，将背景颜色从 lightgray 改变为 steelblue。这种变化通过 transition-box 类中指定的2秒时间平滑地完成。
可以同时将 transition 应用于多个属性。
- 在 transition-2-properties 类的示例中，背景颜色在5秒内变化，宽度在0.5秒内变化。
基本语法
1/* Basic syntax of transition */
2transition: property duration timing-function delay;property指定了动画应应用到哪些 CSS 属性。指定all会将动画应用于所有属性。duration指定了动画完成所需的时间。使用秒（s）或毫秒（ms）来指定。timing-function指定了动画速度的变化方式。你可以使用诸如ease、linear、ease-in、ease-out、ease-in-out等选项。delay指定了动画开始前的延迟时间。以秒或毫秒为单位指定。
transition 的详细属性
1/* Detailed properties of transition */
2transition-property: background-color;
3transition-duration: 0.3s;
4transition-timing-function: ease;
5transition-delay: 500ms;transition 也可以作为以下单独的属性使用。
transition-property：指定应用动画的属性。transition-duration：指定动画完成所需的时间长度。transition-timing-function：指定动画的速度变化。可以使用诸如ease、linear、ease-in、ease-out、ease-in-out等选项。transition-delay：指定动画开始前的延迟时间。
您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。