利用css3制作动画
CSS3 动画基础
CSS3 提供了 @keyframes 规则和 animation 属性来实现动画效果。@keyframes 定义动画的关键帧，animation 控制动画的播放方式（如持续时间、延迟、循环次数等）。
定义关键帧
通过 @keyframes 指定动画从开始到结束的样式变化：
@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}或使用百分比定义多阶段动画：
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}应用动画
通过 animation 属性将动画绑定到元素：
.element {
animation: slideIn 1s ease-in-out;
}animation 是以下子属性的简写：
animation-name：关键帧名称（如slideIn）。animation-duration：动画时长（如2s）。animation-timing-function：速度曲线（如ease、linear）。animation-delay：延迟时间（如0.5s）。animation-iteration-count：播放次数（如infinite）。animation-direction：播放方向（如alternate）。animation-fill-mode：动画结束后的样式（如forwards）。
常见动画效果示例
淡入效果
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-in {
animation: fadeIn 0.5s ease-in;
}旋转动画
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.spinner {
animation: spin 2s linear infinite;
}弹跳效果
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
.bounce {
animation: bounce 0.5s infinite;
}控制动画播放状态
通过 JavaScript 动态控制动画的暂停与播放：
const element = document.querySelector('.element');
element.style.animationPlayState = 'paused'; // 暂停
element.style.animationPlayState = 'running'; // 恢复性能优化建议
- 优先使用
transform和opacity属性，它们可通过 GPU 加速。 - 避免频繁触发重排（如修改
width、height）。 - 使用
will-change提示浏览器优化：.element { will-change: transform; }
通过组合关键帧和动画属性，可以实现复杂的交互效果，如加载动画、页面过渡等。
