如何在CSS中实现类IF逻辑？小环到指定位置触发文本淡入

嘿，这个需求我之前也碰到过！纯CSS完全能实现这种「当小圆环到达指定位置触发中心文本淡入」的效果，核心思路就是把两个动画的时间线精准对齐——毕竟小圆环的旋转是有固定时长的，我们可以算出它到目标位置的时间点，让文本的淡入动画刚好在那一刻启动。

首先假设你的小圆环旋转动画总时长是10s（你可以根据实际需求调整），先明确小圆环到达目标位置的时间：

• 如果目标是正右侧（0°初始位置），触发时间就是0s；
• 如果是正下方（90°），就是总时长的1/4，也就是2.5s；
• 正左侧（180°）对应5s，正上方（270°）对应7.5s。

接下来给中心文本写淡入动画，通过animation-delay设置触发时间，同时用animation-fill-mode: forwards让动画结束后保持文本显示状态：

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

.center-text {
  opacity: 0;
  animation: fadeIn 0.5s ease-in-out forwards;
  /* 示例：小圆环10秒转一圈，到达正下方的时间是2.5秒，这里就设置延迟2.5秒 */
  animation-delay: 2.5s;
}

然后确保小圆环的旋转动画和这个时间线完全同步：

/* 你的原有顺时针旋转动画，保持匀速linear很重要！ */
@keyframes clockwiseRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.small-circle {
  animation: clockwiseRotate 10s linear infinite;
}

如果你的目标位置不是正上下左右，而是自定义角度（比如135°），可以通过CSS变量关联角度和时长，自动计算触发延迟：

:root {
  --rotate-duration: 10s; /* 旋转总时长 */
  --target-angle: 135deg; /* 目标触发角度 */
}

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

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

.small-circle {
  animation: clockwiseRotate var(--rotate-duration) linear infinite;
}

.center-text {
  opacity: 0;
  animation: fadeIn 0.5s ease-in-out forwards;
  /* 自动计算延迟时间：(目标角度/360°) * 旋转总时长 */
  animation-delay: calc( (var(--target-angle)/360deg) * var(--rotate-duration) );
}

• 一定要给旋转动画用linear缓动函数，否则速度不均匀的话，时间计算会完全不准；
• 如果是逆时针旋转（counterClockwiseRotate），只需要把角度计算反过来：animation-delay: calc( ((360deg - var(--target-angle))/360deg) * var(--rotate-duration) )；
• 如果需要每转一圈都触发一次淡入，可以把文本动画设置为infinite，同时让文本动画的时长和旋转时长一致，在关键帧里加入“淡入-保持-淡出”的阶段。

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