僅限動畫背景

我在一個名爲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

僅限動畫背景

回答

相關問題