Tengo el siguiente código

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-css -->

    #preloader {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: #fff;
      z-index: 100;
    }

    #loader {
      width: 150px;
      height: 150px;
      position: absolute;
      left: 50%;
      top: 50%;
      background: url(https://i.imgur.com/QRgZIhI.png) no-repeat center 0;
      margin: -50px 0 0 -50px;
      -webkit-animation: pulse 2s ease-in-out infinite;
      /* Safari 4+ */
      -moz-animation: pulse 2s ease-in-out infinite;
      /* Fx 5+ */
      -o-animation: pulse 2s ease-in-out infinite;
      /* Opera 12+ */
      animation: pulse 2s ease-in-out infinite;
      /* IE 10+, Fx 29+ */
    }

<!-- language: lang-html -->

    <div id="preloader">
      <div id="loader"></div>
    </div>

<!-- end snippet -->

Quiero que se aplique el efecto `animation: pulse` a la imagen, pero no logro hacer que funcione.

Intenté con `@keyframes` 

    @-webkit-keyframes pulse {
      animation: pulse 2s ease-in-out infinite } 
    
    @-moz-keyframes pulse {
      animation: pulse 2s ease-in-out infinite } 
    
    @-o-keyframes pulse {
      animation: pulse 2s ease-in-out infinite } 
    
    @keyframes pulse {
      animation: pulse 2s ease-in-out infinite }  

Pero tampoco me funcionó.

En un principio hice un gif animado en un sitio web que daba ese servicio, pero la calidad es muy deficiente, por eso opté por esta medida.

Muchas gracias!