小编obr*_*ezy的帖子

我正在尝试触发CSS动画onclick，但是每次单击后都要重新启动它。我知道我可以打开和关闭动画，但是我想每次单击按钮时都触发动画。另外，最初CSS动画不应运行。仅在单击时运行。

这是我的笔。 http://codepen.io/omarel/pen/JRwpZp

HTML：

<a href="#" class="addtocart">click me</a>

jQuery的：

 $('.addtocart').click(function () {  
     $(this).addClass('on');
 }); 

CSS：

.addtocart {
    position: relative;
}

    .addtocart.on {
        -webkit-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
        -moz-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
        -ms-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
        -o-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
        animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
    }

@keyframes cartbtnFade {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }

    10% {
        transform: translateY(-100%);
    }

    15% {
        transform: translateY(0);
    }

    30% { …

我正在使用 flex 并且我有 4 列。我将如何打破它让 2 并排移动？

我的笔：http : //codepen.io/omarel/pen/PpPXao

.flexparent {
  display: -webkit-flex;
  display: flex;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  justify-content: center;
}

.flexparent .flexchild {
  width: 30%;
}

<div class="flexparent">
  <div class="flexchild">
    <img src="../images/new/mw/icons/icon-trains.png" alt="">
    <h2>Col 1</h2>

  </div>
  <div class="flexchild">
    <img src="../images/new/mw/icons/icon-events.png" alt="">
    <h2>Col 2</h2>

  </div>
  <div class="flexchild">
    <img src="../images/new/mw/icons/icon-parks.png" alt="">
    <h2>Col 3</h2>
  </div>
  <div class="flexchild">
    <img src="../images/new/mw/icons/icon-walk.png" alt="">
    <h2>Col 4</h2>
  </div>
</div>

假设我有一个简单的 JavaScript 对象：

 {"omar":"espn.com","omar1":"espn1.com","omar3":"espn.com"}

如何在"espn.com"不知道密钥名称的情况下返回所有共享的密钥？

在这种情况下，只有"omar"和"omar3"应该返回。