title: Zoom Background Image with CSS or JavaScript
body: <p>I would like to scale the background image of my div over time, so that it looks like it is zooming in and out (without hovering the mouse over - I'm just looking for the animation to start automatically). But, no matter what I try, the background animation just looks choppy.</p>
  
  <p>If I set the div to scale, then the transition is smooth, but it scales the entire div, not just the background image. For additional information, I am running the most recent version of Chrome, and have tried on both Windows and OS. You can see an example here: <a href="https://jsfiddle.net/sdqv19a0/" rel="nofollow noreferrer">https://jsfiddle.net/sdqv19a0/</a></p>
  
  <pre><code> &lt;div class="site-main-banner"&gt;
  
          &lt;div class="caption"&gt;
              &lt;!-- Bootstrap --&gt;
              &lt;div class="container"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-xs-12"&gt;
  
                          &lt;!-- figure --&gt;
                          &lt;figure&gt; &lt;img src="images/signature.png" alt="signature"&gt; &lt;/figure&gt;
                          &lt;!-- H1 Heading --&gt;
                          &lt;h1 class="typewrite" data-period="2000" data-type='[ "Purposeful design", "Data-driven marketing", "Dynamic branding", "I love it all." ]'&gt; &lt;span class="wrap"&gt;&lt;/span&gt; &lt;/h1&gt;
                          &lt;!-- H2 Heading --&gt;
                          &lt;h2&gt;graphic designer • web designer • analytical marketer&lt;/h2&gt;
                          &lt;div class="clearfix"&gt; &lt;/div&gt;
                          &lt;!-- Button --&gt;
                          &lt;a href="#" class="theme-btn"&gt;view my portfolio&lt;/a&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.site-main-banner {
  float:left;
  width:100%;
  background:url(https://preview.ibb.co/m8kxST/static_banner_new.jpg) no-repeat center center;
  background-attachment:fixed;
  background-size:cover;
  margin: 0;
  padding: 0;
  display: block;
  clear: both;
  position: relative;
  text-align:center;
  overflow: hidden;
  animation: shrink 5s infinite alternate steps(60);
  }
  @keyframes shrink {
  0% {
  background-size: 110% 110%;
  }
  100% {
  background-size: 100% 100%;
  }
  }
  .site-main-banner a.theme-btn {
  color: #FFFFFF;
  border:#FFFFFF solid 1px;
  background:none;
  box-shadow:none;
  }
  .site-main-banner a.theme-btn:hover {
  color: #bc6ca7;
  border:#FFFFFF solid 1px;
  background:#FFFFFF;
  box-shadow:none;
  }
  .site-main-banner .caption {
  position: relative;
  float: left;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
  padding:300px 0;
  
  }
  .site-main-banner figure {
  float:left;
  width:100%;
  text-align:center;
  padding:0 0 15px 0;
  }
  </code></pre>
  
  <p>Suggestions? I am open to a js solution, as well, just am not as comfortable with javascript. Thanks!</p>