CODEWITHSUNDEEP
htmlcssanimationcss-animations
ServerSideSkittles
ServerSideSkittles

Reputation: 2973

animate background only

I have an image in a class called logo. The container .logo has an image background which I want to animate so it rotates 360 degrees indefinitely.

When I run the code it animates both images. I only want it to animate the css background property. Is this possible?

Here is my css so far.

a.navbar-brand {
    background: url('http://i.imgur.com/3PL0u4Q.jpg');
    background-repeat: no-repeat;
     height: 180px;
     width: 180px;
    -webkit-animation: spin 16s linear infinite;
    -moz-animation:spin 16s linear infinite;
    animation:spin 16s 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); } }

and the html

<nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#"><img src="http://i.imgur.com/3PL0u4Q.jpg" alt="logo" class="logo"></a>
        </div>

        <div id="navbar" class="navbar-collapse collapse">              
          <ul class="nav navbar-nav navbar-right">
            <li><a href="../navbar/">Default</a></li>
            <li><a href="../navbar-static-top/">Static top</a></li>
            <li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
      <div class="navbar-attatch"></div>    
    </nav>

Fiddle here

I know with css transitions there is an 'all' or 'css-property', but I am not sure how to insert with my example. I have tried multiple ways and it breaks the animation completely.

Upvotes: 1

Views: 1151

Answers (1)

Ruan Mendes
Ruan Mendes

Reputation: 92334

You can't rotate just the background. You can choose which properties animate, but you cannot say that only the background is going to have the transform applied to it.

In your case, you can rotate the image instead of the link. https://jsfiddle.net/mendesjuan/t8auvq39/1/

a.navbar-brand {
    background: url('http://i.imgur.com/3PL0u4Q.jpg');
    background-repeat: no-repeat;
     height: 180px;
     width: 180px;
}

a.navbar-brand img {
      animation:spin 16s 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); } }
<a class="navbar-brand" href="#"><img src="http://i.imgur.com/3PL0u4Q.jpg" alt="logo" class="logo"></a>

For future reference

Please notice how much code I've added to my answer and compare it to how much code you have in the question. Please make sure you remove unnecessary code in your questions

Upvotes: 2

Related Questions