CSS怎样制作加载进度条动画？@keyframes关键帧控制-css教程-PHP中文网

CSS怎样制作加载进度条动画？@keyframes关键帧控制

蓮花仙者

发布： 2025-08-06 08:38:01

原创

1087人浏览过

制作css加载进度条动画的核心是利用@keyframes定义样式变化，并通过animation属性应用；要让动画更平滑，1. 使用ease-in-out或自定义cubic-bezier时间函数优化速度曲线，2. 优先使用transform（如translatex或scalex）替代width变化以提升性能，3. 设置animation-fill-mode: forwards确保动画结束状态停留；对于不确定性加载动画，可1. 利用background-image配合background-position动画实现流动渐变效果，2. 使用伪元素结合transform和opacity创建光斑扫过动画；控制加载状态需结合javascript，1. 通过添加或移除类名控制不同状态（如is-loading、is-complete），2. 使用animation-play-state: paused/running实现动画暂停与恢复，3. 用opacity过渡替代display切换以实现淡入淡出效果，从而提升用户体验，最终达到缓解等待焦虑的目的。

CSS怎样制作加载进度条动画？@keyframes关键帧控制

CSS制作加载进度条动画，核心在于利用

@keyframes

登录后复制

规则，它允许我们定义元素在不同时间点上的样式状态，从而创造出平滑或有节奏的视觉变化。这不仅仅是宽度或位置的简单过渡，更是一种对用户等待心理的巧妙安抚，让用户知道“系统还在努力，请稍候”。它本质上是给一个元素（通常是代表进度的内条）设定一个动画轨迹，从初始状态过渡到最终状态，或者循环往复。

如何让进度条动画更平滑、更自然？

让进度条动画看起来更“活”一点，这其实是个美学与技术结合的问题。我个人在实践中发现，关键在于动画的时间函数（

animation-timing-function

登录后复制

）和动画属性的选择。

首先，

animation-timing-function

登录后复制

的选择至关重要。默认的

ease

登录后复制

虽然不差，但如果你想模拟更真实的加载过程，比如开始快、中间慢、最后又快起来的“加速减速”感，

ease-in-out

登录后复制

会是个不错的选择。它让动画在开始和结束时都有一个平滑的过渡，避免了生硬的跳跃。更高级一点，你可以自定义

cubic-bezier

登录后复制

曲线，精确控制动画的速度曲线。比如，

cubic-bezier(0.68, -0.55, 0.27, 1.55)

登录后复制

能做出一种“弹性”效果，进度条会稍微超出终点再弹回来，虽然不一定适合所有场景，但很有趣。

立即学习“前端免费学习笔记（深入）”；

其次，动画属性的选择也影响很大。我通常建议优先使用

transform

登录后复制

属性来制作动画，比如

transform: translateX()

登录后复制

或

scaleX()

登录后复制

，而不是直接改变

width

登录后复制

。这是因为

transform

登录后复制

通常能触发GPU加速，动画会更加流畅，尤其是在移动设备上，这种差异会更明显。改变

width

登录后复制

可能会导致浏览器重新计算布局，从而引起“卡顿”或“掉帧”现象。

还有个小细节，就是

animation-fill-mode: forwards;

登录后复制

。这个属性确保动画结束后，元素会停留在动画的最后一帧状态，而不是跳回初始状态。这对于确定性进度条（比如从0%到100%）来说非常重要，你总不希望进度条跑完了又突然消失吧。

制作不确定性加载动画（Indeterminate Progress Bar）有哪些技巧？

不确定性加载动画，或者说“骨架屏”那种效果，是当你不清楚具体加载进度时非常实用的方案。它更多是给用户一个“系统正在忙碌”的视觉反馈，而不是具体的百分比。这里有几种我常用的方法：

度加剪辑

度加剪辑（原度咔剪辑），百度旗下AI创作工具

查看详情

一种常见的做法是利用

background-image

登录后复制

和

background-position

登录后复制

的组合。你可以创建一个渐变背景，比如

linear-gradient

登录后复制

，然后通过

@keyframes

登录后复制

动画来改变这个背景的

background-position

登录后复制

。这样，渐变条纹就会像流水一样在进度条上移动，形成一种“流动”的感觉。

.indeterminate-progress {
    width: 100%;
    height: 8px;
    background-color: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.indeterminate-progress::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(to right, transparent 0%, #4CAF50 50%, transparent 100%);
    background-size: 200% 100%; /* 确保渐变条纹足够长 */
    animation: indeterminateMove 1.5s linear infinite;
}

@keyframes indeterminateMove {
    0% {
        background-position: -100% 0; /* 从左边完全移出 */
    }
    100% {
        background-position: 100% 0; /* 移到右边完全移出 */
    }
}

登录后复制

另一种方法是利用伪元素（

::before

登录后复制

或

::after

登录后复制

）配合

transform

登录后复制

。你可以创建一个比容器窄的伪元素，给它一个颜色，然后让它从左到右，或者从右到左地来回移动。结合

opacity

登录后复制

的变化，可以模拟出那种“光斑”扫过的效果。我有时候会给它加一点

box-shadow

登录后复制

，让光斑看起来更立体。

如何在不同加载状态下控制进度条的显示与暂停？

控制进度条的显示和状态，这通常需要JavaScript的介入，但CSS本身也提供了一些很方便的属性来配合。

最直接的方式是利用CSS类（class）来控制。当加载开始时，通过JavaScript给进度条元素添加一个特定的类（比如

is-loading

登录后复制

），这个类里面定义了动画的样式。加载完成后，移除这个类，或者添加另一个类（比如

is-complete

登录后复制

）来改变它的状态，比如让它消失或者变成一个完成的图标。

// 假设你有一个进度条元素
const progressBar = document.querySelector('.progress-bar');

// 加载开始时
function startLoading() {
    progressBar.style.width = '0%'; // 重置进度
    progressBar.classList.add('is-loading');
    progressBar.classList.remove('is-complete');
}

// 加载进行中（如果是确定性进度条）
function updateProgress(percentage) {
    progressBar.style.width = `${percentage}%`;
}

// 加载完成时
function finishLoading() {
    progressBar.style.width = '100%'; // 确保最终是100%
    progressBar.classList.remove('is-loading');
    progressBar.classList.add('is-complete');
    // 动画结束后可以隐藏
    setTimeout(() => {
        // progressBar.style.display = 'none'; // 或者通过opacity逐渐隐藏
    }, 500); // 等待动画完成
}

// 暂停动画
// CSS: animation-play-state: paused;
function pauseAnimation() {
    progressBar.style.animationPlayState = 'paused';
}

// 继续动画
// CSS: animation-play-state: running;
function resumeAnimation() {
    progressBar.style.animationPlayState = 'running';
}

登录后复制

在CSS中，