CSS动画实现求助：三角形指向圆心与圆缩放效果问题

核心问题 #

• 三角形箭头需始终指向圆心，但当前旋转后仅三角形边缘指向圆心；
• 当三角形旋转经过圆的特定位置时，需实现圆的轻微放大效果。

当前代码 #

CSS #

svg {
  width: 70vh;
  height: 70vh;
  background-color: white;
  border: 3px solid navy;
  margin: auto;
  display: block;
  margin-top: calc(50vh - 25vh);
}

.my-triangle {
  width: 0;
  height: 0;
  fill: navy;
  transform-origin: 200px 200px;
  animation: color-transition 8s ease-in-out infinite, rotate-triangle 5s linear infinite;
  scale: 0.2;
}

@keyframes rotate-triangle {
  0% {
    transform: rotate(0deg) translate(0, -795px);
  }
  100% {
    transform: rotate(360deg) translate(0, -795px);
  }
}

@keyframes color-transition {
  0% {
    fill: navy;
  }
  16.6% {
    fill: peachpuff;
  }
  33.3% {
    fill: pink;
  }
  49.9% {
    fill: palevioletred;
  }
  66.4% {
    fill: plum;
  }
  83.7% {
    fill: purple;
  }
  100% {
    fill: navy;
  }
}

.my-circle {
  r: 18px;
  cx: 50%;
  cy: 50%;
  fill: navy;
  animation: color-transition 8s ease-in-out infinite, change-size 5s ease-in-out infinite;
}

@keyframes change-size {
  0% {
    r: 18px;
  }
  90% {
    r: 21px;
  }
  100% {
    r: 18px;
  }
}

HTML #

<svg viewBox="0 0 400 400">
  <circle class="my-circle" />
  <polygon class="my-triangle" points="200,75 300,225 100,225"/>
</svg>

解决方案 #

1. 修复三角形指向圆心问题 #

问题根源是三角形仅绕圆心公转，未自身反向自转，导致顶点无法始终对准圆心。修改思路：

• 调整动画逻辑，让三角形在公转的同时反向自转；
• 修正平移距离为SVG viewBox内的合理值，适配缩放后的三角形；
• 移除多边形冗余的width/height属性。

2. 修复圆的放大效果 #

原动画的放大逻辑不符合“经过特定位置时轻微放大”的要求，重新设计关键帧，在三角形经过上下左右四个位置时触发短暂放大。

修改后完整代码 #

CSS #

svg {
  width: 70vh;
  height: 70vh;
  background-color: white;
  border: 3px solid navy;
  margin: auto;
  display: block;
  margin-top: calc(50vh - 25vh);
}

.my-triangle {
  fill: navy;
  transform-origin: 200px 200px;
  animation: color-transition 8s ease-in-out infinite, rotate-triangle 5s linear infinite;
  scale: 0.2;
}

@keyframes rotate-triangle {
  0% {
    transform: rotate(0deg) translate(0, -170px) rotate(0deg);
  }
  100% {
    transform: rotate(360deg) translate(0, -170px) rotate(-360deg);
  }
}

@keyframes color-transition {
  0% { fill: navy; }
  16.6% { fill: peachpuff; }
  33.3% { fill: pink; }
  49.9% { fill: palevioletred; }
  66.4% { fill: plum; }
  83.7% { fill: purple; }
  100% { fill: navy; }
}

.my-circle {
  r: 18px;
  cx: 50%;
  cy: 50%;
  fill: navy;
  animation: color-transition 8s ease-in-out infinite, change-size 5s ease-in-out infinite;
}

@keyframes change-size {
  /* 保持原尺寸的时间段 */
  0%, 24%, 26%, 49%, 51%, 74%, 76%, 100% {
    r: 18px;
  }
  /* 三角形经过时放大 */
  25%, 50%, 75% {
    r: 21px;
  }
}

HTML #

<svg viewBox="0 0 400 400">
  <circle class="my-circle" />
  <polygon class="my-triangle" points="200,75 300,225 100,225"/>
</svg>

修改说明 #

• 三角形指向修复：通过rotate(360deg) translate(...) rotate(-360deg)的组合，让三角形在绕圆心公转的同时反向自转，确保顶点始终对准圆心；translate(0, -170px)适配了SVG的400x400 viewBox，可根据视觉效果微调这个值。
• 圆放大效果：关键帧设置为每1.25秒（5秒周期的1/4）触发一次短促放大，用相邻的百分比关键帧（如24%/25%/26%）实现快速的尺寸变化，匹配示例中的细微放大效果。

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