CSS怎么实现动画效果 动画效果添加教程

CSS实现动画效果主要依靠两种方式，分别是过渡动画和关键帧动画，两种方式适用不同的场景，开发者可以根据实际需求选择对应的实现方案。

一、过渡动画transition

过渡动画适用于元素状态发生改变时的平滑过渡效果，比如鼠标 hover 时元素的大小、颜色、位置变化，使用transition属性即可实现，不需要定义复杂的动画过程。

1. transition核心属性

transition是多个属性的简写，完整语法如下：

/* 简写形式 */
transition: 过渡属性 过渡时长 过渡曲线 延迟时间;

/* 单独属性说明 */
transition-property: 需要过渡的CSS属性，比如width、color、all（所有属性都过渡）
transition-duration: 过渡持续时间，单位为s（秒）或ms（毫秒）
transition-timing-function: 过渡曲线，常用值有linear（匀速）、ease（慢快慢）、ease-in（慢进）、ease-out（慢出）
transition-delay: 延迟多久开始过渡，单位为s或ms

2. 过渡动画示例

下面实现一个鼠标悬停在按钮上时，按钮背景色渐变、宽度放大的效果：

/* 按钮基础样式 */
.btn {
    width: 120px;
    height: 40px;
    background-color: #409eff;
    color: #fff;
    border: none;
    border-radius: 4px;
    /* 定义过渡效果：所有属性过渡 0.3秒 慢快慢曲线 无延迟 */
    transition: all 0.3s ease;
}

/* 鼠标悬停时的状态 */
.btn:hover {
    width: 160px;
    background-color: #66b1ff;
}

当鼠标移动到按钮上时，按钮的宽度和背景色会在0.3秒内平滑变化，不会出现突兀的跳变。

二、关键帧动画animation

关键帧动画适用于需要自定义完整动画过程的场景，比如元素持续旋转、循环跳动、复杂的位移路径等，需要配合@keyframes规则定义动画的关键节点，再用animation属性调用。

1. @keyframes定义关键帧

@keyframes用来定义动画在不同阶段的状态，支持百分比或者from/to（等价于0%和100%）的写法：

/* 定义一个名为rotate的动画，从0度旋转到360度 */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 也可以用百分比定义更多关键节点 */
@keyframes bounce {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0);
    }
}

2. animation核心属性

animation是调用关键帧动画的简写属性，完整语法如下：

/* 简写形式 */
animation: 动画名称 持续时间 动画曲线 延迟时间 播放次数 播放方向 填充模式 暂停状态;

/* 单独属性说明 */
animation-name: 对应@keyframes定义的动画名称
animation-duration: 动画完成一次循环的时长，单位为s或ms
animation-timing-function: 动画曲线，和transition的取值一致
animation-delay: 延迟多久开始动画
animation-iteration-count: 播放次数，数字或者infinite（无限循环）
animation-direction: 播放方向，normal（正向）、reverse（反向）、alternate（正反交替）
animation-fill-mode: 动画结束后的状态，forwards（保持最后一帧状态）、backwards（保持第一帧状态）
animation-play-state: 动画播放状态，running（播放）、paused（暂停）

3. 关键帧动画示例

下面实现一个元素持续旋转的效果：

/* 定义旋转动画 */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* 应用动画的元素 */
.spin-box {
    width: 100px;
    height: 100px;
    background-color: #f56c6c;
    /* 调用spin动画 2秒完成一次 匀速 无限循环 */
    animation: spin 2s linear infinite;
}

上述代码会让.spin-box元素每2秒旋转一圈，并且持续循环播放。

三、两种动画的适用场景对比

可以通过下面的表格快速判断该选择哪种动画实现方式：

四、动画实现注意事项

• 尽量使用transform和opacity属性实现动画，这两个属性的动画性能更好，不会触发页面的重排重绘。
• 避免给过多元素同时添加复杂动画，可能会造成页面卡顿，影响用户体验。
• 如果动画需要中途暂停或者控制播放进度，可以配合JavaScript修改animation-play-state属性实现。

注意：CSS动画无法获取动画执行的具体进度，如果需要监听动画的每一帧状态或者做更复杂的逻辑控制，还是需要结合JavaScript的requestAnimationFrame实现。

CSS动画transitionanimationkeyframes修改时间：2026-06-12 01:27:33