仅动画背景答案

【问题标题】：animate background only仅动画背景
【发布时间】：2016-03-03 00:00:25
【问题描述】：

我在一个名为 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-property”，但我不确定如何插入我的示例。我尝试了多种方法，它完全破坏了动画。

【问题讨论】：

您不能只旋转背景。您可以选择动画的属性，但不能说只有背景会应用transform。此外，问题应排除不相关的代码。对于您的问题，您可能需要两三行 HTML，永远不要在此处转储您的代码，始终只使用相关部分创建缩减
创建两个单独的元素并只为其中一个设置动画
好的，谢谢，或者我可以设置 :before 并给它一个不同的背景吗？
试一试...如果没有，请提出一个新问题。

标签： html css animation css-animations

【解决方案1】：

您不能只旋转背景。您可以选择动画的属性，但不能说只有背景才会应用变换。

在您的情况下，您可以旋转图像而不是链接。 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); } }

&lt;a class="navbar-brand" href="#"&gt;&lt;img src="http://i.imgur.com/3PL0u4Q.jpg" alt="logo" class="logo"&gt;&lt;/a&gt;

供日后参考

请注意我在答案中添加了多少代码，并将其与您在问题中的代码进行比较。请确保删除问题中不必要的代码

【讨论】：