LESS：当按下按钮时，CSS3动画再次播放

Question

我想动画一个按钮，让动画只播放一次。问题是当第一次点击按钮时动画再次播放：

我正在使用LESS：

#boring_btn{
  width: 100%;
  background: #ffffff;color: @darkgrey;font-size: 25pt;
  position: fixed; bottom:0;right: 0;
  display:block;
  .animation(opacityShift 0.3s ease-in);

  &:active, &:visited,&:link{
    color: @darkgrey;

  }
  div {
    color: inherit;
    margin-left: 30px;
  }
}

#boring_btn:hover{
  color: @red;
}

@-webkit-keyframes opacityShift {
  from   { opacity: 0.0; .transform(rotateX(-86deg));}
  to { opacity: 1.0; .transform(rotateX(180deg));}
}
.animation (@params) {
  -webkit-animation: @params;
  -moz-animation: @params;
  -o-animation: @params;
  animation: @params;
 }

同样，动画播放得很好，但点击按钮后再次播放。谢谢你的帮助。