css动画代码制作

CSS动画基础语法

CSS动画通过@keyframes规则定义动画序列，结合animation属性实现动态效果。以下是基础结构：

@keyframes 动画名称 {
  0% { /* 起始状态 */ }
  100% { /* 结束状态 */ }
}

.element {
  animation: 动画名称 持续时间 速度曲线 延迟 播放次数 方向 填充模式;
}

关键帧定义

关键帧百分比可自由设定，0%和100%可用from/to替代：

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
}

动画属性详解

完整动画属性可拆分为独立属性：

.element {
  animation-name: fadeIn;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  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 1.5s ease-out;
}

弹跳效果：

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-30px); }
  60% { transform: translateY(-15px); }
}

.bounce {
  animation: bounce 2s infinite;
}

性能优化建议

使用transform和opacity属性制作动画，避免触发重排：

/* 高性能动画 */
@keyframes slide {
  from { transform: translateX(-100px); }
  to { transform: translateX(0); }
}

/* 低性能动画（不推荐） */
@keyframes slide {
  from { margin-left: -100px; }
  to { margin-left: 0; }
}

复合动画实现

通过逗号分隔实现多动画同步：

.element {
  animation: 
    fadeIn 1s ease-out,
    slide 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}