Css 动画无法正常工作

Question

我是一名开发人员，所以 CSS 不是我的强项，动画绝对不是。

但是，我正在尝试创建一个简单的动画 - 现在在某种程度上可以工作 - 只是不是我需要的：

    &:before
    {
        background-color:rgba(255,255,255,0.3);
        height:100%;
        transform:scale(0);
        width:100%;
    }

    &:hover, &:focus, &:active
    {
        &::before
        {
            .animation(ripple .4s ease-out);

            .keyframes(ripple; 
            {
                100%
                {
                    .transform(scale(1));
                }
            });
        }
    }

这个想法是，在悬停、聚焦或活动状态下，背景会从中心向外缩放 - 确实如此。

但是，当动画完成 - 并且背景已完全调整大小时，它会返回到其原始状态（消失），同时仍处于悬停状态。

我需要进行哪些更改以确保背景在对焦时仍然可见？

Answer 1

您可以使用forwards 并将transition 与animation 组合在一起以冻结一段时间：

a,
a:before,
a:after {
  display: inline-block;
}
a:before,
a:after {
  content: "\\o/";
  transform: scale(0);
  transition: 99999s;
  /* delay as much as possible return to normal */
}
a:hover:before,
a:hover:after {
  transition: 0s;/* reset transition timing */
  animation: grow 1s forwards;
  color: green;
}
@keyframes grow {
  100% {
    transform: scale(1);
  }
}
html {
  display: flex;
  height: 100%;
  width: 100%;
  font-size: 5em;
}
body {
  margin: auto;
}

<a href="#">link</a>

codepen to play with.