从基础概念到高级实战，掌握现代网页动效设计
基础概念：理解CSS动画原理
什么是CSS过渡？
CSS过渡允许元素在不同状态之间平滑地变化，而不是瞬间改变。这是创建简单交互效果的基础。
transition: property duration timing-function delay;
什么是CSS动画？
CSS动画通过关键帧定义更复杂的动画序列，可以实现多阶段、循环和反向播放等高级效果。
@keyframes animation-name { … }
性能对比：何时使用过渡 vs 动画
使用过渡的情况
- 简单的状态变化（hover、focus）
- 需要自动反向的动画
- 性能要求较高的场景
- 简单的属性变化
使用动画的情况
- 复杂的多阶段动画
- 需要循环播放的效果
- 需要精确控制时间轴
- 独立于用户交互的动画
CSS过渡效果实战
基础过渡效果演示
颜色过渡
transition: all 0.3s ease;
变形过渡
cubic-bezier(0.68, -0.55, 0.265, 1.55)
缓动函数对比
linear
ease
CSS关键帧动画实战
基础动画示例
弹跳动画
旋转加载动画
动画属性详解
animation-direction
- normal: 正向播放
- reverse: 反向播放
- alternate: 交替播放
- alternate-reverse: 反向交替
animation-fill-mode
- none: 默认状态
- forwards: 保持结束状态
- backwards: 应用开始状态
- both: 同时应用
高级动画技巧
动画性能优化
高性能属性
- transform: translate, scale, rotate
- opacity
- filter
- backdrop-filter
低性能属性
- width / height
- margin / padding
- left / top
- background-color
综合实战：卡片悬停效果
动态卡片
悬停查看3D变换效果，包含位移、阴影和颜色变化。
3D变换卡片
体验3D旋转和缩放效果，使用自定义缓动函数。
function startBounce() {
const element = document.getElementById(‘bounce-demo’);
element.style.animation = ‘none’;
setTimeout(() => {
element.style.animation = ‘bounce 1s ease infinite’;
}, 10);
}
function startSpin() {
const element = document.getElementById(‘spin-demo’);
element.style.animation = ‘none’;
setTimeout(() => {
element.style.animation = ‘spin 1s linear infinite’;
}, 10);
}
// 动态创建样式
const style = document.createElement(‘style’);
style.textContent = `
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-30px); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#bounce-demo {
animation: bounce 1s ease infinite;
animation-play-state: paused;
}
#spin-demo {
animation: spin 1s linear infinite;
animation-play-state: paused;
}
`;
document.head.appendChild(style);
