css制作动画源码

CSS 动画源码示例

CSS 动画可以通过 @keyframes 规则和 animation 属性实现。以下是几种常见的动画效果源码示例：

基础淡入淡出动画

.fade-in {
  animation: fadeIn 2s ease-in-out;
}

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

旋转动画

.rotate {
  animation: rotate 3s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

弹跳效果

.bounce {
  animation: bounce 1s infinite alternate;
}

@keyframes bounce {
  from { transform: translateY(0); }
  to { transform: translateY(-20px); }
}

滑动动画

.slide-in {
  animation: slideIn 1.5s ease-out;
}

@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

脉冲效果

.pulse {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

颜色渐变动画

.color-change {
  animation: colorShift 4s infinite alternate;
}

@keyframes colorShift {
  0% { background-color: #ff0000; }
  50% { background-color: #00ff00; }
  100% { background-color: #0000ff; }
}

动画属性说明

• animation-name: 指定 @keyframes 名称
• animation-duration: 动画持续时间（如 2s）
• animation-timing-function: 速度曲线（如 ease, linear）
• animation-delay: 延迟开始时间
• animation-iteration-count: 播放次数（infinite 表示无限循环）
• animation-direction: 播放方向（如 alternate 交替反向）

组合使用示例

.combined-animation {
  animation: 
    fadeIn 2s ease-in-out,
    slideIn 1.5s ease-out 2s;
}

这些代码可以直接复制到样式表中使用，通过为HTML元素添加对应的class来触发动画效果。