当前位置：首页 > news >正文

CSS Animations实战指南：打造流畅的用户体验

news 2026/5/24 6:41:39

CSS Animations实战指南：打造流畅的用户体验

引言

CSS Animations是创建流畅动画效果的强大工具，无需JavaScript即可实现丰富的视觉效果。本文将深入探讨CSS动画的核心概念、实用技巧和最佳实践。

一、CSS动画基础

1.1 @keyframes定义动画

@keyframes slideIn { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } }

1.2 animation属性

.element { animation-name: slideIn; animation-duration: 0.5s; animation-timing-function: ease-out; animation-delay: 0.2s; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: forwards; animation-play-state: running; } /* 简写 */ .element { animation: slideIn 0.5s ease-out 0.2s 1 normal forwards running; }

二、常用动画效果

2.1 淡入淡出

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .fade-in { animation: fadeIn 0.3s ease-out forwards; } .fade-out { animation: fadeOut 0.3s ease-in forwards; }

2.2 缩放动画

@keyframes scaleIn { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.05); } 100% { transform: scale(1); opacity: 1; } } @keyframes scaleOut { from { transform: scale(1); opacity: 1; } to { transform: scale(0); opacity: 0; } } .scale-in { animation: scaleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } .scale-out { animation: scaleOut 0.3s ease-in forwards; }

2.3 旋转动画

@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes rotateY { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate { animation: rotate 2s linear infinite; } .rotate-y { animation: rotateY 1s ease-in-out; transform-style: preserve-3d; }

2.4 弹跳动画

@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } @keyframes bounceIn { 0% { transform: scale(0); } 50% { transform: scale(1.1); } 70% { transform: scale(0.9); } 100% { transform: scale(1); } } .bounce { animation: bounce 1s ease-in-out infinite; } .bounce-in { animation: bounceIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

三、缓动函数

3.1 内置缓动函数

.element { animation-timing-function: ease; animation-timing-function: ease-in; animation-timing-function: ease-out; animation-timing-function: ease-in-out; animation-timing-function: linear; }

3.2 自定义贝塞尔曲线

.element { animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }

3.3 steps()函数

@keyframes typing { from { width: 0; } to { width: 100%; } } .typing { overflow: hidden; white-space: nowrap; animation: typing 2s steps(20) forwards; }

四、动画组合与序列

4.1 多动画组合

@keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes scaleUp { from { transform: scale(0.9); } to { transform: scale(1); } } .combo-animation { animation: fadeIn 0.5s ease-out forwards, slideIn 0.5s ease-out forwards, scaleUp 0.3s ease-out 0.5s forwards; }

4.2 交错动画

@keyframes staggerIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .item { animation: staggerIn 0.5s ease-out forwards; } .item:nth-child(1) { animation-delay: 0s; } .item:nth-child(2) { animation-delay: 0.1s; } .item:nth-child(3) { animation-delay: 0.2s; } .item:nth-child(4) { animation-delay: 0.3s; } .item:nth-child(5) { animation-delay: 0.4s; }

五、性能优化

5.1 使用GPU加速

.element { transform: translateZ(0); backface-visibility: hidden; perspective: 1000px; }

5.2 避免触发重排

/* 推荐：只改变transform和opacity */ .element { animation: move 1s ease-out; } @keyframes move { to { transform: translateX(100px); opacity: 0.5; } } /* 避免：改变width会触发重排 */ .element { animation: badMove 1s ease-out; } @keyframes badMove { to { margin-left: 100px; width: 200px; } }

5.3 使用will-change

.element { will-change: transform, opacity; }

六、动画控制

6.1 悬停动画

.button { transition: transform 0.2s ease-out; } .button:hover { transform: scale(1.05); } .button:active { transform: scale(0.95); }

6.2 状态动画

.card { transition: all 0.3s ease; border: 2px solid transparent; } .card:hover { box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); border-color: #4CAF50; } .card.selected { transform: scale(1.02); box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.3); }

6.3 JavaScript控制

const element = document.querySelector('.animated'); element.style.animationPlayState = 'paused'; element.style.animationPlayState = 'running'; element.addEventListener('animationstart', () => { console.log('动画开始'); }); element.addEventListener('animationend', () => { console.log('动画结束'); }); element.addEventListener('animationiteration', () => { console.log('动画循环'); });

七、实战案例

7.1 加载动画

@keyframes spinner { to { transform: rotate(360deg); } } .spinner { width: 40px; height: 40px; border: 4px solid #f3f3f3; border-top-color: #4CAF50; border-radius: 50%; animation: spinner 1s linear infinite; }

7.2 进度条动画

@keyframes progress { from { width: 0; } } .progress-bar { height: 8px; background: #eee; border-radius: 4px; overflow: hidden; } .progress { height: 100%; background: linear-gradient(90deg, #4CAF50, #8BC34A); border-radius: 4px; animation: progress 2s ease-out forwards; }

7.3 卡片翻转动画

.card-container { perspective: 1000px; } .card { position: relative; width: 200px; height: 300px; transform-style: preserve-3d; transition: transform 0.6s; } .card.flipped { transform: rotateY(180deg); } .card-front, .card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 8px; } .card-back { transform: rotateY(180deg); }

八、浏览器兼容性

/* 基础支持 */ .element { -webkit-animation: slideIn 0.5s ease-out; animation: slideIn 0.5s ease-out; } @-webkit-keyframes slideIn { from { -webkit-transform: translateX(-100%); } to { -webkit-transform: translateX(0); } } @keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }