动画是一种综合艺术，它集合了绘画、电影、数字媒体、摄影、音乐、文学等多种艺术门类于一身。具体来说，动画是通过在连续多格的胶片上拍摄一系列单个画面，然后连续播放，产生动态视觉的艺术和技术。
动画的英文有很多表述，如animation、cartoon、animated cartoon、cameracature等。其中较正式的“Animation”一词源自于拉丁文字根anima，意思为“灵魂”，动词animate是“赋予生命”的意思，引申为使某物活起来的意思。
因此，动画可以理解为使用绘画的手法，创造生命运动的艺术。动画技术较规范的定义是采用逐帧拍摄对象并连续播放而形成运动的影像技术。
在CSS中，动画可以通过@keyframes规则来定义。可以使用@keyframes规则来创建动画，并在特定时间点定义动画的帧。这些帧描述了元素从一种样式逐渐变化为另一种样式的效果。
CSS动画的工作原理：
To create a CSS animation sequence, you style the element you want to animate with the
animationproperty or its sub-properties. This lets you configure the timing, duration, and other details of how the animation sequence should progress. This does not configure the actual appearance of the animation, which is done using the@keyframesat-rule as described in the Defining animation sequence using keyframes.
animation常用的子属性如下：
p {
animation-duration: 3s;
animation-name: rightToLeft;
}
关键帧定义了动画过程中元素状态的实际变化效果。通过 @keyframes rule在动画序列中定义关键帧的样式来控制CSS 动画序列中的中间状态，从而呈现出视觉上的动画效果。
@keyframes <keyframes-name> {
<qualified-rule-list>
}
<qualified-rule-list>:
<percentage>{
property: value
}
例如，
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
要使用关键帧，先创建一个带名称的 @keyframes 规则，以便后续使用 animation-name 属性将动画同其关键帧声明匹配。每个 @keyframes 规则包含多个关键帧，也就是一段样式块语句，每个关键帧由一个百分比值作为名称，代表在动画进行中，在哪个阶段触发这个帧所包含的样式。可以按任意顺序列出关键帧百分比，它们将按照其应该发生的顺序来处理。
关键帧可以使用百分比或关键词“from”和“to”来表示时间点。“from”等价于0%表示起始帧，“to”等价于“100%”表示结束帧。
一旦完成动画的时间设置，接下来就需要定义动画的具体表现。通过使用@keyframes建立两个或两个以上关键帧来实现。每一个关键帧都描述了动画元素在给定的时间点上应该如何渲染。
实现一个文字颜色动态变化的效果。(基于《CSS基础笔记-01CSS概述》的代码)
/* 元素选择器，即直接匹配 HTML 元素的选择器。 */
h1 {
color: red;
}
/* 用逗号将不同选择器隔开，即可一次使用多个选择器 */
p,li {
color: green;
}
/* 去除list bullets */
li {
/* list-style-type: none; */
/* list-style-type: space-counter; */
/* list-style-type: kannada;r */
list-style-type: "\1F44D";
}
p {
animation-name: colorChange;
animation-duration: 4s;
animation-iteration-count:infinite;
}
@keyframes colorChange {
0% {color: red;}
50% {color: green;}
100% {color: blue;}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Tao Te Ching</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>第一章（论道）</h1>
<p style="white-space: pre-line;">
道可道，非常道；名可名，非常名。
无，名天地之始；有，名万物之母;
故常无，欲以观其妙；常有，欲以观其徼。
此两者，同出而异名，同谓之玄。玄之又玄，众妙之门。
</p>
<ul>
<li>第二章</li>
<li>第三章</li>
<li>第四章</li>
<li>第五章</li>
</ul>
</body>
</html>
实现一个滑入的效果。
p {
animation-name: colorChange;
animation-duration: 4s;
animation-iteration-count:infinite;
}
@keyframes colorChange {
0% {color: red;}
50% {color: green;}
100% {color: blue;}
}