使用css到背景图像的波动画

Question

我正在使用CSS动画（波浪动画）， 这是我的代码

HTML

<div id="MobileApp" class="animation">
  <div id="MobileAppDiv">
    <table border="0" cellspacing="0" cellpadding="0" width="100%">
      <tr>
        <td>
          <h2>Some thing</h2>
          <p>Some thing </p>
          <br />
          <a href="#">Download App</a>
        </td>
        <td><img src="images/mobile.png"></td>
      </tr>
    </table>
  </div>
</div>

CSS

#MobileApp {
  background           :  url(../images/mobile-app.jpg);
  background-position  :  center;
  background-size      :  cover;
  margin-top           :  10px;
}

.animation::before {
   animation   :  100.7s linear 0s normal none infinite running wave-animation-s;
   background  :  rgba(0,0,0,0) url(../images/animated-bg.png) repeat-x scroll 0 0;
   content     :  "";
   height      :  79px;
   left        :  0;
   position    :  absolute;
   top         :  -45px;
   width       :  100%;
}

但动画无效，我不知道为什么？