当前位置：首页 > CSS

制作css动画效果

2026-03-12 10:50:10CSS

CSS动画基础语法

CSS动画通过@keyframes规则定义动画序列，结合animation属性实现。关键帧语法示例：

@keyframes slide-in {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(0); }
}
.element {
  animation: slide-in 1s ease-out forwards;
}

常用动画属性

animation-name: 指定@keyframes名称
animation-duration: 动画持续时间（如2s）
animation-timing-function: 速度曲线（ease/linear/ease-in-out）
animation-delay: 延迟启动时间
animation-iteration-count: 重复次数（infinite表示无限循环）
animation-direction: 播放方向（alternate表示往返播放）
animation-fill-mode: 动画结束后的样式状态

实用动画效果示例

淡入效果：

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.fade-in {
  animation: fadeIn 0.8s cubic-bezier(0.39, 0.58, 0.57, 1);
}

弹跳按钮：

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
.btn-bounce {
  animation: bounce 0.5s infinite alternate;
}

性能优化技巧

优先使用transform和opacity属性，这些属性不会触发重排
避免动画影响width/height/margin等会触发布局变化的属性
使用will-change: transform;提前告知浏览器元素将发生变化
对移动端设备使用@media (prefers-reduced-motion)减少动画效果

复杂动画组合

通过多个动画叠加实现复杂效果：

制作css动画效果

@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.spin-pulse {
  animation: 
    spin 2s linear infinite,
    pulse 1.5s ease-in-out infinite;
}