javascript - 重新创建此预加载屏幕-看起来像gif而不是编码的动画

在这里编码newb！
我一直在尝试重新创建此预加载屏幕（http://addpbj.com）几个小时，但似乎无法正确完成。在线上的所有教程都显示了如何制作动画微调器和装载器，但是我喜欢徽标的变化。我觉得我要走错路了。我一直在尝试将随附的gif作为我的预加载屏幕。
到目前为止，这是我的代码：

    <div id="dvLoading"></div>
*/----CSS----/*
   #dvLoading{
    background:#000       url(https://media.giphy.com/media/l4JyJHAF8blvfplf2/source.gif) no-repeat center center;
  display: blocks;
  position:relative;
  left: 50%;
  top: 50%;
  height: 150px;
  width: 150px;
  position: fixed;
  z-index: 1000;
   margin: -75px 0 0 -75px;
}
*/----JQ----/*
        $(window).load(function(){
       $('#dvLoading').fadeOut(2000);
    });

(http://codepen.io/anon/pen/MJGPQG)。 jQuery有什么问题吗？

任何帮助将不胜感激。

最佳答案

这只是一个缩放和不透明度循环。

body{
  background: #ed4424;
  position: relative;
  height: 100vh;
}

img{
  position: absolute;
  width:100px;
  height: 100px;
  left: 50%;
  top: 50%;
  transform-origin: left;
  -webkit-animation: THROB 8s infinite;
  -moz-animation:    THROB 8s infinite;
  -o-animation:      THROB 8s infinite;
  animation:         THROB 8s infinite;
}

@-webkit-keyframes THROB {
  0%   { opacity: 1; transform: scale(1) translate(-50%,-50%); }
  50%  { opacity: 0.4; transform: scale(0.7) translate(-50%,-50%); }
  100% { opacity: 1; transform: scale(1) translate(-50%,-50%); }
}
@-moz-keyframes THROB {
  0%   { opacity: 1; transform: scale(1) translate(-50%,-50%); }
  50%  { opacity: 0.4; transform: scale(0.7) translate(-50%,-50%); }
  100% { opacity: 1; transform: scale(1) translate(-50%,-50%); }
}
@-o-keyframes THROB {
  0%   { opacity: 1; transform: scale(1) translate(-50%,-50%); }
  50%  { opacity: 0.4; transform: scale(0.7) translate(-50%,-50%); }
  100% { opacity: 1; transform: scale(1) translate(-50%,-50%); }
}
@keyframes THROB {
  0%   { opacity: 1; transform: scale(1) translate(-50%,-50%); }
  50%  { opacity: 0.4; transform: scale(0.7) translate(-50%,-50%); }
  100% { opacity: 1; transform: scale(1) translate(-50%,-50%); }
}

<img src="http://static1.squarespace.com/static/56d8893cb09f9547596ab9f7/t/56d9a10fe707eb99e3cf68c3/1485878555441/?format=1500w">