CSS:在单击时从按钮的中心动画一个不同颜色的圆圈

Question

我有一个按钮，我想在它被点击时设置动画(理想情况下它会将状态永久更改为第二种颜色)。当我尝试使用背景图像/衬里渐变解决方案时，它没有达到我想要的圆形效果并且没有持续存在。

使用 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) 时获得任何动画。

Answer 1

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