运行动画的纯 CSS 方法通过点击

Question

我正在尝试以纯 CSS 的形式重新创建 material 设计波纹效果，并且我已准备好动画。问题是，当单击元素时，我无法让动画运行一直播放。我已经尝试过转换 (attempt 1 demo, attempt 2 demo)，但这些都不会运行一直通过。

另一种更可能的方法是使用 CSS3 动画（我现在不担心浏览器支持）。我已准备好动画关键帧，但我以前从未使用过很多动画，而且我看不到单击时运行动画的方法。

@-webkit-keyframes ripple {
  0% {
    background-size: 1% 1%;
    opacity: 0.5;
  }
  70% {
    background-size: 1000% 1000%;
    opacity: 0.2;
  }
  100% {
    opacity: 0;
    background-size: 1000% 1000%;
  }
}

@keyframes ripple {
  0% {
    background-size: 1% 1%;
    opacity: 0.5;
  }
  70% {
    background-size: 1000% 1000%;
    opacity: 0.2;
  }
  100% {
    opacity: 0;
    background-size: 1000% 1000%;
  }
}

.button {
  background-color: blue;
  padding: 12px;
  display: inline-block;
  border-radius: 5px;
  color: white;
  font-family: sans-serif;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}

.button::after {
  position: absolute;
  content: " ";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at center, #FFF 0%, #FFF 10%, transparent 10.1%, transparent 100%);
  background-position: center center;
  background-repeat: no-repeat;
  background-color: transparent;
  -webkit-animation: ripple 0.6s 0s normal forwards infinite running ease-in;
  animation: ripple 0.6s 0s normal forwards infinite running ease-in;
}

.button:active::after {
  /*Somehow the animation needs to run on click only, and then run all the way through*/
}

<div class="ripple button"><a>Click this</a></div>

我考虑过但无法实现的事情包括更改动画延迟、使用 opacity 使 ::after 透明以及使用动画计时功能。

Answer 1

试试这个，但你需要使用 jquery 来保持按钮处于活动状态，我没有使用 jquery 因此按住点击；

@-webkit-keyframes ripple {
  0% {
    background-size: 1% 1%;
    opacity: 0.5;
  }
  70% {
    background-size: 1000% 1000%;
    opacity: 0.2;
  }
  100% {
    opacity: 0;
    background-size: 1000% 1000%;
  }
}

@keyframes ripple {
  0% {
    background-size: 1% 1%;
    opacity: 0.5;
  }
  70% {
    background-size: 1000% 1000%;
    opacity: 0.2;
  }
  100% {
    opacity: 0;
    background-size: 1000% 1000%;
  }
}

.button {
  background-color: blue;
  padding: 12px;
  display: inline-block;
  border-radius: 5px;
  color: white;
  font-family: sans-serif;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}



.button:active:after{
  position: absolute;
  content: " ";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at center, #FFF 0%, #FFF 10%, transparent 10.1%, transparent 100%);
  background-position: center center;
  background-repeat: no-repeat;
  background-color: transparent;
  -webkit-animation: ripple 0.6s 0s normal forwards infinite running ease-in;
  animation: ripple 0.6s 0s normal forwards infinite running ease-in;}

<div class='ripple button'><a href=''>hell</a></div>

Answer 2

我用另一种方式做到了这一点：使用 :focus 样式保持活动状态。您可以在这里查看： http://codepen.io/jonnitto/pen/OVmvPB?editors=110

运行动画的纯 CSS 方法通过点击

Pure CSS method of running an animation through on click

html

css

animation

css-animations

运行 动画的纯 CSS 方法通过点击

Pure CSS method of running an animation through on click

html

css

animation

css-animations

运行动画的纯 CSS 方法通过点击