使用 @keyframes 规则：
使用 @keyframes 规则定义动画的关键帧，然后将其应用于元素的 animation 属性上。例如： @keyframes example { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; }}.animated-element { animation: example 2s ease-in-out infinite;}这个例子定义了一个淡入淡出的动画，并使其无限循环播放。
@keyframes属性：
@keyframes 规则的名称：定义了动画的名称，格式为 @keyframes name，其中 name 是动画的名称。
关键帧声明：在 @keyframes 规则内部，通过指定百分比或关键字（如 from 和 to）来描述动画的不同阶段。
0% 或 from：定义动画开始时的样式。100% 或 to：定义动画结束时的样式。n%：定义动画在执行过程中的某个中间阶段的样式，其中 n 是一个介于 0 和 100 之间的数字。 CSS 属性和值：在每个关键帧中，可以指定任意数量的 CSS 属性及其值，以定义动画中每个阶段元素的样式变化。
例如，一个简单的 @keyframes 规则可以如下所示：
@keyframes example { 0% { transform: scale(1); } 50% { transform: scale(1.5); opacity: 0.8; } 100% { transform: scale(1); }}transition 过渡：
transition 允许你在元素状态改变时平滑过渡到新的样式。你可以定义过渡的属性、持续时间、以及过渡的速度曲线。例如：
.transition-element { transition: width 0.5s ease-in-out;}.transition-element:hover { width: 200px;}1.transition-property：指定要过渡的 CSS 属性的名称。可以是单个属性名，多个属性名，或者是关键字 all，表示所有属性都会过渡。例如：
transition-property: width;transition-property: background-color;transition-property: width, height, background-color;transition-property: all;2.transition-duration：指定过渡效果持续的时间，以秒（s）或毫秒（ms）为单位。例如：
transition-duration: 0.3s;3.transition-timing-function：指定过渡效果的时间函数，即动画速度的变化曲线。常见的值有 linear（线性）、ease（缓入缓出，默认值）、ease-in（加速）、ease-out（减速）、ease-in-out（先加速后减速）等。例如：
transition-timing-function: ease-in-out;4.transition-delay：可选，指定过渡效果开始前延迟的时间。用于延迟过渡的触发。例如：
transition-delay: 0.2s;这些属性可以单独使用，也可以一起组合使用，形成完整的过渡效果定义。例如：
/* 将宽度和背景颜色的变化进行过渡，持续时间为0.5秒，速度曲线为ease-in-out，延迟0.1秒 */transition: width 0.5s ease-in-out 0.1s, background-color 0.5s ease-in-out 0.1s;animation 属性：
animation 属性结合 @keyframes 规则可以实现更复杂的动画效果。你可以定义动画的名称、持续时间、速度曲线、延迟和播放次数等。
animation-name: 指定要应用的关键帧动画的名称。可以是已经在@keyframes规则中定义过的名称。
animation-duration: 指定动画完成一个周期所花费的时间，以秒（s）或毫秒（ms）为单位。
animation-timing-function: 指定动画的时间进度曲线，即控制动画在其持续时间内如何变化。常见的值有 ease（默认值，慢-快-慢）、linear（匀速）、ease-in（慢开始）、ease-out（慢结束）、ease-in-out（慢开始和结束）等。
animation-delay: 指定动画开始之前的延迟时间，以秒（s）或毫秒（ms）为单位。
animation-iteration-count: 指定动画循环的次数，默认值为 1，可以设置为具体的次数或 infinite 表示无限循环。
animation-direction: 指定动画播放的方向，可选值有 normal（默认，正常播放）、reverse（反向播放）、alternate（交替播放，正向反向交替）、alternate-reverse（反向交替播放）。
animation-fill-mode: 指定动画执行之前和之后如何应用样式。常见的值包括 none（默认，不改变样式）、forwards（动画结束后应用最后一帧的样式）、backwards（动画播放前应用第一帧的样式）、both（向前和向后都应用样式）。
animation-play-state: 指定动画的播放状态，可以是 running（运行）或 paused（暂停）。用来控制动画的启停状态。
例如 :
.animated-element { animation-name: slidein; animation-duration: 3s; animation-timing-function: ease; animation-delay: 1s; animation-iteration-count: infinite;}@keyframes slidein { from { transform: translateX(-100%); } to { transform: translateX(0); }}JavaScript 操作 classList：
const element = document.querySelector('.animated-element');element.classList.add('slide-in'); 在这种方法中，可以在 CSS 中定义 .slide-in 类的样式，例如使用 @keyframes 或 transition。
这些方法各有特点，选择哪种取决于你想要实现的动画效果的复杂性和需求。