面试题：CSS @keyframes 中等难度：关键帧动画延迟与循环设置

Question

使用 @keyframes 创建一个简单的淡入动画，要求动画延迟2秒开始，并且无限循环。同时，请解释为什么要这样设置关键帧以及相关属性的作用。

Answer 1

/* 创建淡入动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 使用动画 */
.element {
  animation: fadeIn 2s ease-in-out 2s infinite;
}

关键帧设置解释

• from { opacity: 0; }：定义动画开始时，元素的透明度为0，即完全透明，不可见状态。这是淡入动画的起始点。
• to { opacity: 1; }：定义动画结束时，元素的透明度为1，即完全不透明，可见状态。这是淡入动画的结束点。

动画属性解释

• animation: fadeIn：指定应用名为fadeIn的关键帧动画。
• 2s：动画持续时间为2秒，即从完全透明到完全不透明这个过程所需时间。
• ease-in-out：动画的时间函数，ease-in-out表示动画开始和结束时速度较慢，中间速度较快，使动画过渡更自然。
• 2s（第二个2s）：动画延迟2秒开始，即元素加载2秒后才开始播放淡入动画。
• infinite：动画无限循环播放，淡入效果会不断重复。