EnlightenCode

CSS延迟动画：实现可控的日出日落效果 🎨 ​

引言 ​

在前端开发中，动画效果能让页面更加生动有趣。今天我们将探讨如何使用CSS动画实现一个可交互的日出日落效果，并学习如何通过CSS变量来控制动画延迟。

效果预览 👀 ​

  • 背景色渐变模拟天空颜色变化
  • 黄色圆形模拟太阳升落
  • 可通过滑块控制动画开始时间
  • 动画循环播放，平滑过渡 实现可控的日出日落效果

核心实现 💡 ​

HTML结构 ​

html
<div class="scene">
  <div class="circle"></div>
</div>
<div class="controls">
  <input type="range" id="delayInput" value="0" min="0" max="5" step="0.01">
</div>

CSS关键代码 ​

css
.scene {
  --duration: -5s;  /* 定义CSS变量控制延迟 */
  width: 100%;
  height: 100vh;
  background: #87CEEB;
  animation: bgChange 10s linear forwards paused;
  animation-delay: var(--duration);
}

.circle {
  width: 100px;
  height: 100px;
  background: #FFD700;
  border-radius: 50%;
  position: absolute;
  animation: moveUpDown 10s linear forwards paused;
  animation-delay: var(--duration);
}

JavaScript控制 ​

javascript
const input = document.getElementById('delayInput');
const scene = document.querySelector('.scene');
input.addEventListener('input', (e) => {
  const value = e.target.value;
  scene.style.setProperty('--duration', `-${value}s`);
});

技术要点解析 📝 ​

1. CSS变量与动画延迟 ​

  • 使用--duration自定义属性（CSS变量）来控制动画延迟
  • 通过JavaScript动态修改CSS变量值
  • 负值延迟使动画从中间开始播放

2. 动画状态控制 ​

  • forwards: 保持动画最后一帧状态
  • paused: 初始暂停动画
  • linear: 使用线性缓动确保匀速运动

3. 动画同步 ​

  • 背景色变化和太阳运动使用相同的延迟值
  • 保证多个动画效果同步进行

进阶优化建议 🚀 ​

1. 性能优化 ​

css
.scene {
  will-change: background;
  transform: translateZ(0);  /* 开启GPU加速 */
}

.circle {
  will-change: transform;
}

2. 响应式适配 ​

css
@media (max-width: 768px) {
  .circle {
    width: 60px;
    height: 60px;
  }
}

3. 交互优化 ​

css
.controls {
  background: rgba(255, 255, 255, 0.2);
  padding: 10px;
  backdrop-filter: blur(5px);
}

input[type="range"] {
  width: 200px;
  cursor: pointer;
}

注意事项 ⚠️ ​

  1. 浏览器兼容性

    • CSS变量需要IE11+
    • backdrop-filter需要检查兼容性

  2. 动画性能

    • 避免同时执行过多动画
    • 优先使用transform和opacity属性
    • 考虑使用requestAnimationFrame优化

  3. 用户体验

    • 考虑添加prefers-reduced-motion支持
    • 提供动画控制选项
    • 确保滑块操作流畅

扩展应用 🎯 ​

  1. 昼夜交替场景
css
@keyframes starsTwinkle {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

.stars {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  animation: starsTwinkle 2s infinite;
}
  1. 天气效果
css
@keyframes cloudFloat {
  from { transform: translateX(-100%); }
  to { transform: translateX(100vw); }
}

.cloud {
  position: absolute;
  animation: cloudFloat 20s linear infinite;
}

总结 📚 ​

通过CSS变量和动画属性的结合，我们可以创建出丰富的交互动画效果。关键在于：

  • 合理使用CSS变量控制动画
  • 注意动画性能优化
  • 考虑用户体验和兼容性
  • 灵活运用动画属性组合

希望这个示例能帮助你更好地理解CSS动画的应用，创造出更多有趣的交互效果！

参考资源 📖 ​