仅限动画背景

我在一个名为logo的类中有一个图像。容器.logo有一个图像背景，我想要动画，所以它可以无限旋转360度。仅限动画背景

当我运行代码时，它为这两个图像添加动画。我只想让它动画CSS背景属性。这可能吗？

这是我的CSS到目前为止。

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); } }

和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

我知道用CSS过渡有一个“全”或“CSS属性”，但我不知道如何与插入我的例。我尝试了多种方式，并完全打破了动画。

来源

2016-03-02 ServerSideSkittles

您不能仅旋转背景。您可以选择哪些属性设置为动画，但不能说只有背景将会应用“变形”。此外，问题应该排除不相关的代码。对于你的问题，你需要两三行HTML代码，永远不要在这里转储你的代码，总是创建一个只有相关部分的缩减 –

创建两个单独的元素，并为它们中的一个创建动画 –

OK谢谢，或者我能够设置：之前和给那个不同的背景？ – ServerSideSkittles

你不能只旋转背景。您可以选择哪些属性设置为动画，但不能说只有背景将会应用该变换。

就你而言，你可以旋转图像而不是链接。 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>

以供将来参考

请注意我多少代码添加到我的答案，并将它与你有多少代码有问题。请确保在您的问题中删除不必要的代码

来源

2016-03-02 15:13:36

仅限动画背景

回答

相关问题