Adding Style Attributes To Image Called From Another Style

This is to add a spinning/loading icon for images as they load. The existing code I'm using calls up an animated .gif image as a background image 'behind' an image thumbnail, so th

Solution 1:

You can animate the div with the background, you just need to add the loading class to it and with a separate class to add the other styles to it like the background url, width, height, position etc...

.load-style {
  height: 64px;
  width: 64px;
  background: url(http://www.jasonkenison.com/uploads/blog/loading.png) no-repeat center center;
  background-size: 100%;
  position: absolute;
}
.loading {
  -webkit-animation: spin 2s linear infinite;
  -moz-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

<divclass="loading load-style"></div>

Solution 2:

You didn't add the class which your animating to the HTML. In your CSS you have a class called "loading" but the HTML doesn't know what to animate. In your div before the style="" tag add class="loading" and it will work, other than that your CSS works.