CSS动画与过渡

介绍

CSS动画与过渡是增强用户体验的重要技术，它们使网页元素能够平滑地改变状态和位置，创造出生动的视觉效果。CSS3引入了过渡(transition)和动画(animation)属性，使开发者能够在不使用JavaScript的情况下实现复杂的动画效果。

原理

CSS动画与过渡的工作原理：

过渡(transition)：使元素从一种样式平滑地过渡到另一种样式，需要触发条件(如:hover)
动画(animation)：通过关键帧(keyframes)定义多个状态，自动播放动画序列
过渡和动画都可以控制属性变化的持续时间、延迟、变化速度曲线
过渡是一次性的，而动画可以循环播放
可以通过JavaScript控制动画的播放、暂停和重置

图示

/* 过渡 */
.transition {
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: ease;
    transition-delay: 0s;
    /* 简写 */
    transition: all 0.3s ease 0s;
}

/* 动画 */
@keyframes slideIn {
    from { transform: translateX(-100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.animation {
    animation-name: slideIn;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: forwards;
    animation-play-state: running;
    /* 简写 */
    animation: slideIn 1s ease 0s infinite alternate forwards running;
}

实例

过渡效果示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS过渡示例</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 20px;
            transition: all 0.5s ease;
        }

        .box:hover {
            width: 200px;
            height: 200px;
            background-color: blue;
            border-radius: 50%;
            transform: rotate(180deg);
        }

        .button {
            padding: 10px 20px;
            background-color: green;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .button:hover {
            background-color: darkgreen;
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .button:active {
            transform: translateY(0);
            box-shadow: none;
        }
    </style>
</head>
<body>
    <h1>CSS过渡示例</h1>
    <div class="box"></div>
    <button class="button">点击我</button>
</body>
</html>

动画效果示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS动画示例</title>
    <style>
        @keyframes pulse {
            0% { transform: scale(1); background-color: red; }
            50% { transform: scale(1.2); background-color: yellow; }
            100% { transform: scale(1); background-color: red; }
        }

        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-50px); }
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .pulse {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: red;
            animation: pulse 2s infinite;
            margin: 20px;
        }

        .bounce {
            width: 100px;
            height: 100px;
            background-color: blue;
            animation: bounce 2s infinite;
            margin: 100px 20px 20px;
        }

        .spin {
            width: 100px;
            height: 100px;
            border: 10px solid green;
            border-top: 10px solid transparent;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 20px;
        }

        .control-panel {
            margin: 20px;
        }

        button {
            padding: 5px 10px;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <h1>CSS动画示例</h1>
    <div class="pulse"></div>
    <div class="bounce"></div>
    <div class="spin"></div>
    <div class="control-panel">
        <button onclick="document.querySelector('.pulse').style.animationPlayState = 'paused'">暂停脉冲</button>
        <button onclick="document.querySelector('.pulse').style.animationPlayState = 'running'">播放脉冲</button>
        <button onclick="document.querySelector('.bounce').style.animationPlayState = 'paused'">暂停弹跳</button>
        <button onclick="document.querySelector('.bounce').style.animationPlayState = 'running'">播放弹跳</button>
    </div>
</body>
</html>

专业解决方案

过渡属性

transition-property: 指定要过渡的CSS属性
transition-duration: 过渡效果持续的时间
transition-timing-function: 过渡效果的速度曲线
transition-delay: 过渡效果开始前的延迟时间
transition: 过渡属性的简写形式

动画属性

@keyframes: 定义动画关键帧
animation-name: 指定要应用的动画名称
animation-duration: 动画持续的时间
animation-timing-function: 动画的速度曲线
animation-delay: 动画开始前的延迟时间
animation-iteration-count: 动画播放的次数
animation-direction: 动画播放的方向
animation-fill-mode: 动画结束后的状态
animation-play-state: 动画的播放状态
animation: 动画属性的简写形式

性能优化

优先使用transform和opacity属性，它们不会触发重排(reflow)
避免使用会导致重排的属性(如width, height, margin等)
使用will-change属性提示浏览器优化动画
动画元素使用position: fixed或position: absolute，减少对其他元素的影响
合理设置动画的持续时间和缓动函数

最佳实践

保持动画简洁，避免过度使用动画影响用户体验
为动画添加适当的延迟，创造层次感
使用CSS变量动态控制动画参数
测试动画在不同浏览器和设备上的表现
结合JavaScript实现更复杂的交互效果
为关键元素添加动画，引导用户注意力
遵循品牌风格和用户体验指南

工具推荐

Animista：CSS动画效果库
Keyframes.app：可视化创建CSS动画
CSS Animation Generator：动画生成器
Chrome DevTools：内置动画调试工具
Lottie：使用JSON渲染动画的库

介绍​

原理​

图示​

实例​

过渡效果示例​

动画效果示例​

专业解决方案​

过渡属性​

动画属性​

性能优化​

最佳实践​

工具推荐​

介绍

原理

图示

实例

过渡效果示例

动画效果示例

专业解决方案

过渡属性

动画属性

性能优化

最佳实践

工具推荐