如何动画BounceIn inview

Question

我在OnePage网站上有BounceIn动画。当我将所有这些代码添加到我的网站时，它不起作用，我不知道我有什么错误。我在一个模板中发现了这种反弹效果。我已获得所有这些许可证。

＆＃13;

＆＃13;

jQuery('.contact-form').bind('inview', function(event, visible) {
  if (visible == true) {
    jQuery('.contact-form').addClass("animated bounceIn");
  } else {
    jQuery('.contact-form').removeClass("animated bounceIn");
  }
});

/**
 * author Remy Sharp
 * url http://remysharp.com/2009/01/26/element-in-view-event-plugin/
 */
(function($) {
  function getViewportHeight() {
    var height = window.innerHeight; // Safari, Opera
    var mode = document.compatMode;

    if ((mode || !$.support.boxModel)) { // IE, Gecko
      height = (mode == 'CSS1Compat') ?
        document.documentElement.clientHeight : // Standards
        document.body.clientHeight; // Quirks
    }

    return height;
  }

  $(window).scroll(function() {
    var vpH = getViewportHeight(),
      scrolltop = (document.documentElement.scrollTop ?
        document.documentElement.scrollTop :
        document.body.scrollTop),
      elems = [];

    // naughty, but this is how it knows which elements to check for
    $.each($.cache, function() {
      if (this.events && this.events.inview) {
        elems.push(this.handle.elem);
      }
    });

    if (elems.length) {
      $(elems).each(function() {
        var $el = $(this),
          top = $el.offset().top,
          height = $el.height(),
          inview = $el.data('inview') || false;

        if (scrolltop > (top + height) || scrolltop + vpH < top) {
          if (inview) {
            $el.data('inview', false);
            $el.trigger('inview', [false]);
          }
        } else if (scrolltop < (top + height)) {
          if (!inview) {
            $el.data('inview', true);
            $el.trigger('inview', [true]);
          }
        }
      });
    }
  });

  // kick the event to pick up any elements already in view.
  // note however, this only works if the plugin is included after the elements are bound to 'inview'
  $(function() {
    $(window).scroll();
  });
})(jQuery);

＆＃13;

.animated {
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
}
.animated.hinge {
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
}
.contact-form {
  background: #fff;
  background: rgba(255, 255, 255, 0.9);
  z-index: 110;
  position: relative;
  margin-top: -300px;
  padding: 20px;
}
@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
  }
  70% {
    -webkit-transform: scale(.9);
  }
  100% {
    -webkit-transform: scale(1);
  }
}
@-moz-keyframes bounceIn {
  0% {
    opacity: 0;
    -moz-transform: scale(.3);
  }
  50% {
    opacity: 1;
    -moz-transform: scale(1.05);
  }
  70% {
    -moz-transform: scale(.9);
  }
  100% {
    -moz-transform: scale(1);
  }
}
@-o-keyframes bounceIn {
  0% {
    opacity: 0;
    -o-transform: scale(.3);
  }
  50% {
    opacity: 1;
    -o-transform: scale(1.05);
  }
  70% {
    -o-transform: scale(.9);
  }
  100% {
    -o-transform: scale(1);
  }
}
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(.9);
  }
  100% {
    transform: scale(1);
  }
}
.bounceIn {
  -webkit-animation-name: bounceIn;
  -moz-animation-name: bounceIn;
  -o-animation-name: bounceIn;
  animation-name: bounceIn;
}

＆＃13;

<div id="contact">
  <div class="span5 contact-form">
    <form method="POST" action="spracovanie.php">
      <p>Jmeno
        <input name="jmeno" type="text" class="bluebutton" />Tel
        <input name="telefon" type="text" class="bluebutton" />
        <br />Sprava
        <textarea name="sprava" id="textarea"></textarea>
        <input name="submit" title="submit" type="submit" value="@" class="float-button" />
      </p>
    </form>
  </div>
  <div class="span6 contactinfo">
    <h2 class="contact">Tel: 0054285167, E-mail: info@sof.com</h2>
    <br />
    <div id="socnetworks">
      <div class="fb"></div>
      <div class="tw"></div>
      <div class="mail"></div>
    </div>

＆＃13;

＆＃13;

＆＃13;