CSS实现的背景切换动画运行速度过快如何调整？

你的动画运行过快是因为animation简写属性中设置的单次完整动画周期时长为1s，整个4张背景的切换流程会在1秒内全部执行完成，调整方法如下：

• 调整动画总时长
  把.one选择器里的animation: changeBg 1s infinite;中的1s修改为更大的数值即可，单位可以用s（秒）或者ms（毫秒）。比如你希望整个背景切换周期为20秒，就改为：

.one{ 
  animation: changeBg 20s infinite; 
  width:100%; 
  height:450px; 
}

数值越大，整个动画的运行速度越慢。

• 优化背景停留效果（可选）
  如果你希望每张背景图停留的时间更长、切换过渡的时间更短，可以调整@keyframes里的百分比设置，避免全程都在切换背景。示例如下：

@keyframes changeBg{
  0%,8%  {background-image: url("../project1/img/hero1.jpg");}
  25%,33% {background-image: url("../project1/img/hero2.jpg");}
  50%,58% {background-image: url("../project1/img/hero3.jpg");}
  75%,83% {background-image: url("../project1/img/hero4.jpg");}
}

这样修改后，大部分时间是单张背景静止展示的状态，只会在小段时间内执行切换过渡，视觉效果更自然。

内容的提问来源于stack exchange，提问作者Romeo