CSS 高级动画与过渡

什么是 CSS 高级动画与过渡？

CSS 高级动画与过渡是指使用 CSS3 提供的动画和过渡功能，创建更加复杂和流畅的视觉效果。这些功能包括过渡、关键帧动画、变换等。

CSS 过渡

CSS 过渡允许元素在不同状态之间平滑地过渡：

/* 基本过渡 */
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: all 1s ease; /* 定义过渡效果 */
    /* transition 属性语法: transition: property duration timing-function delay; */
    /* property: 要过渡的属性，all 表示所有属性 */
    /* duration: 过渡持续时间，单位为秒或毫秒 */
    /* timing-function: 过渡函数，如 ease、linear、ease-in、ease-out、ease-in-out */
    /* delay: 过渡延迟时间，单位为秒或毫秒 */
}

.box:hover {
    width: 200px;
    height: 200px;
    background-color: blue;
}

/* 单个属性过渡 */
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: width 1s ease, height 1s ease, background-color 1s ease;
}

/* 不同的过渡时间和函数 */
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: width 2s ease-in, height 1s ease-out, background-color 0.5s linear;
}

CSS 关键帧动画

CSS 关键帧动画允许创建更加复杂的动画效果：

/* 定义关键帧动画 */
@keyframes rotate {
    from { transform: rotate(0deg); } /* 动画开始状态 */
    to { transform: rotate(360deg); } /* 动画结束状态 */
}

/* 使用关键帧动画 */
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: rotate 2s linear infinite; /* 应用动画 */
    /* animation 属性语法: animation: name duration timing-function delay iteration-count direction fill-mode play-state; */
    /* name: 动画名称，对应 @keyframes 定义的名称 */
    /* duration: 动画持续时间 */
    /* timing-function: 动画函数 */
    /* delay: 动画延迟时间 */
    /* iteration-count: 动画重复次数，infinite 表示无限循环 */
    /* direction: 动画方向，如 normal、reverse、alternate、alternate-reverse */
    /* fill-mode: 动画结束后元素的状态，如 none、forwards、backwards、both */
    /* play-state: 动画播放状态，如 running、paused */
}

/* 多关键帧动画 */
@keyframes bounce {
    0% { transform: translateY(0); } /* 动画开始 */
    50% { transform: translateY(-50px); } /* 动画中间点 */
    100% { transform: translateY(0); } /* 动画结束 */
}

.box {
    animation: bounce 2s ease-in-out infinite;
}

CSS 变换

CSS 变换允许对元素进行旋转、缩放、平移和倾斜：

/* 旋转 */
transform: rotate(45deg); /* 顺时针旋转 45 度 */

/* 缩放 */
transform: scale(1.5); /* 放大 1.5 倍 */
transform: scaleX(1.5); /* 水平方向放大 1.5 倍 */
transform: scaleY(0.5); /* 垂直方向缩小 0.5 倍 */

/* 平移 */
transform: translate(50px, 20px); /* 向右平移 50px，向下平移 20px */
transform: translateX(50px); /* 水平方向平移 50px */
transform: translateY(20px); /* 垂直方向平移 20px */

/* 倾斜 */
transform: skew(20deg, 10deg); /* 水平方向倾斜 20 度，垂直方向倾斜 10 度 */
transform: skewX(20deg); /* 水平方向倾斜 20 度 */
transform: skewY(10deg); /* 垂直方向倾斜 10 度 */

/* 组合变换 */
transform: rotate(45deg) scale(1.5) translate(50px, 20px); /* 先旋转，再缩放，最后平移 */

/* 3D 变换 */
transform: rotateX(45deg); /* X 轴旋转 45 度 */
transform: rotateY(45deg); /* Y 轴旋转 45 度 */
transform: rotateZ(45deg); /* Z 轴旋转 45 度 */
transform: perspective(1000px) rotate3d(1, 1, 1, 45deg); /* 3D 旋转 */

CSS 高级动画技巧

以下是一些 CSS 高级动画技巧：

1. 动画缓动函数

/* 使用 cubic-bezier 创建自定义缓动函数 */
.box {
    transition: all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* 弹性效果 */
}

/* 常见的缓动函数 */
.ease {
    transition-timing-function: ease; /* 默认，先慢后快再慢 */
}

.linear {
    transition-timing-function: linear; /* 匀速 */
}

.ease-in {
    transition-timing-function: ease-in; /* 渐入 */
}

.ease-out {
    transition-timing-function: ease-out; /* 渐出 */
}

.ease-in-out {
    transition-timing-function: ease-in-out; /* 渐入渐出 */
}

2. 动画序列

/* 为多个元素设置不同的动画延迟，创建序列效果 */
.box {
    animation: fadeIn 1s ease forwards;
    opacity: 0;
}

.box1 {
    animation-delay: 0s;
}

.box2 {
    animation-delay: 0.2s;
}

.box3 {
    animation-delay: 0.4s;
}

.box4 {
    animation-delay: 0.6s;
}

@keyframes fadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

3. 滚动触发动画

/* 使用 Intersection Observer API 实现滚动触发动画 */
<div class="animate-on-scroll">滚动到此处时动画</div>

<script>
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('animate');
            }
        });
    });

    document.querySelectorAll('.animate-on-scroll').forEach(el => {
        observer.observe(el);
    });
</script>

<style>
    .animate-on-scroll {
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.6s ease;
    }

    .animate-on-scroll.animate {
        opacity: 1;
        transform: translateY(0);
    }
</style>

4. 鼠标跟随效果

/* 鼠标跟随效果 */
<div class="cursor"></div>

<script>
    const cursor = document.querySelector('.cursor');
    
    document.addEventListener('mousemove', (e) => {
        cursor.style.left = e.clientX + 'px';
        cursor.style.top = e.clientY + 'px';
    });
</script>

<style>
    .cursor {
        position: fixed;
        width: 20px;
        height: 20px;
        background-color: red;
        border-radius: 50%;
        pointer-events: none;
        mix-blend-mode: difference;
        transition: transform 0.1s ease;
    }
</style>

5. 视差滚动效果

/* 视差滚动效果 */
.parallax {
    background-image: url('image.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 500px;
}

/* 高级视差效果 */
.parallax-container {
    position: relative;
    height: 500px;
    overflow: hidden;
}

.parallax-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 150%;
    background-image: url('image.jpg');
    background-size: cover;
    background-position: center;
    transform: translateY(0);
}

<script>
    window.addEventListener('scroll', () => {
        const scrolled = window.pageYOffset;
        const parallax = document.querySelector('.parallax-bg');
        const speed = scrolled * 0.5;
        parallax.style.transform = `translateY(${speed}px)`;
    });
</script>

CSS 动画性能优化

为了确保 CSS 动画流畅运行，需要注意以下性能优化技巧：

使用 transform 和 opacity：这两个属性的动画不会触发重排（reflow），性能更好
避免使用 box-shadow 和 border-radius：这些属性的动画会触发重排，性能较差
使用 will-change：告诉浏览器元素即将发生变化，提前做好准备
使用 GPU 加速：通过 transform: translateZ(0) 或 transform: translate3d(0, 0, 0) 触发 GPU 加速
限制动画元素数量：同时动画的元素数量越多，性能消耗越大
使用 requestAnimationFrame：对于 JavaScript 动画，使用 requestAnimationFrame 可以获得更好的性能

CSS 动画最佳实践

保持动画简洁：过度使用动画会分散用户注意力，影响用户体验
使用适当的动画持续时间：根据动画效果选择合适的持续时间，一般在 0.3s 到 1s 之间
考虑用户偏好：尊重用户的 "减少动画" 系统设置
测试不同设备：确保动画在不同设备上都能正常运行
使用动画库：对于复杂动画，可以考虑使用成熟的动画库，如 Animate.css、GreenSock 等