使用 CSS 制作进度条动画效果可以通过以下步骤实现：
1.首先，需要创建一个带有进度条的 HTML 元素，例如 div 元素。给这个元素设置一个固定的宽度和高度，以及一个背景颜色。
2.使用 CSS 的伪元素 ::before 或 ::after，为进度条添加一个新的元素。给这个元素设置一个宽度为 0，高度与父元素相同，并设置一个背景颜色，以显示进度条的颜色。
3.使用关键帧 @keyframes 规则来定义进度条的动画效果。设置从 0% 到 100% 的不同时间点，以及进度条元素的宽度随时间的变化。例如，设置从 0% 到 100% 的时间点，进度条元素的宽度从 0% 变化到 100%。
4.将动画效果应用到进度条元素上，使用 animation 属性，设置动画名称、持续时间、延迟时间和动画播放方式等属性。
下面是一个 CSS 制作进度条动画效果的示例代码：
<div class="progress">
<div class="progress-bar"></div>
</div>
<style>
.progress {
width: 200px;
height: 20px;
background-color: #f2f2f2;
position: relative;
}
.progress-bar {
height: 100%;
width: 0%;
background-color: #4CAF50;
position: absolute;
top: 0;
left: 0;
animation: progress-bar 2s ease-out forwards;
}
@keyframes progress-bar {
0% { width: 0%; }
100% { width: 100%; }
}
</style>在上面的代码中，使用了 .progress 和 .progress-bar 两个类来设置进度条的外观和动画效果。通过设置 .progress 元素的宽度和高度，以及 .progress-bar 元素的宽度为 0，创建了一个初始状态的进度条。使用 animation 属性将进度条元素的动画效果应用到动画名称 progress-bar，持续时间 2 秒，动画播放方式为 ease-out，延迟时间默认为 0。最后，使用 @keyframes 规则定义了进度条的动画效果，在动画的 0% 和 100% 时间点，分别设置进度条元素的宽度为 0% 和 100%。