Javascript 图形按钮上的持续CSS3转换效果

我对web开发有点陌生，我想创建一个具有突出显示脉冲效果的图形按钮，让我解释一下：

按钮由两层构成，第一层是始终显示的默认状态，第二层是仅在单击或触摸按钮时显示的高亮状态（白色）（显示时该层的不透明度为1，隐藏时为0）

我的问题是，我希望高亮显示的不透明度从0变为1，而不管单击或触摸事件的持续时间如何。只有当达到值1时，才应转换回“不透明度0”值，这意味着在hightlight层的不透明度达到1之前不应触发释放事件（mouseup或touchend）

我正在使用Compass（scss）和带有phonegap封装的jquery mobile

我已经编写了一个有效的版本，但没有达到我的目标： 一旦我松开按钮，到高亮显示状态的转换就会停止（例如，如果我快速触摸，即使不透明度为0.2秒，高亮显示状态也不可见，尽管触发了touchend事件…（在到达1之前，转换返回到0）

整个代码可能不太干净，但我正在努力学习：）

欢迎提供任何线索或建议

HTML代码如下所示：

<div class=btn-test>
 <span>
  <a class=btn-a href=#>
  </a>
 </span>
</div

@import "compass/reset";
@import "compass/css3";

.btn-test {

  span {
      @include background-image(image-url("foo.png"));
      background-position: 0px 0px;

      width: 72px;
      height: 70px;

      display: inline-block;
    }

  a {
      @include background-image(image-url("foo.png"));
      background-position: 0 71px;

      @include transition-property(opacity);
      @include transition-duration(0.2s);
      @include transition-timing-function(ease);  

      width: 72px;
      height: 70px;

      display: inline-block;

      -webkit-touch-callout: none !important; 
  }

  .btn-a {

    opacity: 0;
  }

  .btn-a:active {

    opacity: 1;
  }

}

---

你想要的是一个动画，而不是一个简单的过渡。使用

gem安装compass--pre

解决方案是为不同的状态添加关键帧：

@import "compass/css3/animation";

@include keyframes(flashButton){
  0%{
    opacity: 0;
  }
  50%{
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.animate-button {
  @include animate(flashButton 1s ease);
}

然后使用一点jQuery：

$('.btn-test').on('click', function(){
  //reset state in case animation has already been played
  $('.btn-test').removeClass('animate-button');
  setTimeout(function(){$('.btn-test').addClass('animate-button')}, 1)
});

---

我还没有使用它，但你也可以使用它，这是一个罗盘端口，可以在这里找到很棒的css动画

谢谢，我知道怎么做了！不幸的是，我无法让它工作，虽然动画套件似乎安装正确，指南针安装在1.03 alpha版本：/1，因此，不透明度始终为1，我不知道为什么。。。（我在搜索）：）普菲欧，我终于成功了！我不确定，但我最终发现关键帧定义必须放在文件顶部，css块之外：）再次感谢！