CSS：在单击时从按钮中心为不同颜色的圆圈设置动画答案

【问题标题】：CSS: Animating a different colored circle from the center of a button on clickCSS：在单击时从按钮中心为不同颜色的圆圈设置动画
【发布时间】：2019-11-22 16:09:20
【问题描述】：

我有一个按钮，我想在单击它时对其进行动画处理（理想情况下，它会将状态永久更改为第二种颜色）。虽然我尝试了背景图像/线性渐变解决方案，但它没有达到我想要的圆形效果并且没有持续存在。

以this CodePen 为灵感，我想我会尝试使用 ::before 伪选择器为圆圈设置动画。

const ClickAnimation = keyframes`
  from {
    transform: scale(0);
    opacity: 1;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
`;

const StyledButton = styled.button`
  color: white;
  background-color: ${colors.secondary500};
  text-align: center;
  text-transform: uppercase;

  &:hover {
    background-color: ${colors.secondary400};
  }

  &::before {
    content: "";
    background-color: ${colors.secondary300};
  }

  &:active::before {
    animation: ${ClickAnimation} 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  }

  &:disabled {
    background-color: ${colors.primary300};
  }
`

const LargeButton = styled(StyledButton)`
  width: 100%;
  line-height: 23px;
  font-size: 19px;
  font-weight: 600;
  padding: 8px 0;
  border-radius: 4px;
`

const SmallButton = styled(StyledButton)`
  height: 28px;
  width: 148px;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 500;
  line-height: 18px;
`

export default Button;

虽然我的悬停效果有效，但目前我实际上并没有在点击 (:active) 时获得任何动画。

【问题讨论】：

标签： css reactjs css-animations styled-components

【解决方案1】：

ClickAnimation 中动画结束时不透明度仍为 1。不应该是0吗？

【讨论】：

但是获得不透明度的元素是我希望在点击结束时出现的元素。我现在正在伪元素上设置动画。我尝试将其切换为 0，但结果相同。
啊，好吧，我的错。起初没有看到您正在更改比例。在这种情况下，您可以这样做。 Here's the codepen 所以要注意的是，您必须首先设置宽度和高度（以及 codepen 中提到的其他定位属性），以便 CSS 知道它应该转换到哪个程度。
谢谢！这绝对有助于动画 ::before 元素，但我仍在努力解决一些问题。我希望圆圈直接来自我的按钮元素的中心，我不希望它溢出按钮。现在圆圈的作用独立于按钮，但我希望它只显示在按钮的边界内。这是显示我到目前为止所拥有的笔：codepen.io/ipenguin67/pen/orremB
Updated codepne 我已经以百分比设置动画，而不是使用 from/to，因此我们可以在活动状态更改之前完成动画。
查看代码，如果您需要进一步说明，请告诉我。