在 HTML 中使用 CSS 动画可以通过 @keyframes 规则和 animation 属性来实现。以下是基本的步骤：
首先，在 CSS 中定义动画的关键帧，即动画的起始状态和结束状态。可以使用 @keyframes 规则来定义关键帧。例如：
@keyframes my-animation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}上面的代码定义了一个名为 my-animation 的动画，它从 0% 的不透明度开始，到 100% 的完全不透明。
然后，在需要应用动画的元素上，使用 animation 属性来指定动画的名称、持续时间、循环次数等。例如：
.my-element {
animation-name: my-animation;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}上面的代码指定了一个名为 my-animation 的动画应用于类名为 .my-element 的元素上，动画持续时间为 2 秒，时间函数为 ease-in-out（即先加速后减速），延迟 1 秒后开始播放，循环次数为无限次，播放方向为交替。
除了上述属性外，animation 属性还有很多其他可用的属性，例如 animation-fill-mode、animation-play-state 等等。
需要注意的是，为了兼容不同浏览器，需要使用浏览器前缀来指定 animation 属性。例如：
.my-element {
-webkit-animation-name: my-animation;
-webkit-animation-duration: 2s;
animation-name: my-animation;
animation-duration: 2s;
}其中，-webkit- 表示 WebKit 浏览器（例如 Safari 和 Chrome）的前缀，而无前缀的属性表示标准语法，适用于大多数主流浏览器。
关键词高亮：@keyframes、animation、animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode、animation-play-state、浏览器前缀。