Question

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

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

到目前为止，这是我的CSS。

print 'Hello World';

和html

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

Fiddle here

我知道css过渡有一个'all'或'css-property'，但我不知道如何插入我的例子。我尝试了多种方式，它完全打破了动画。

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

<a class="navbar-brand" href="#"><img src="http://i.imgur.com/3PL0u4Q.jpg" alt="logo" class="logo"></a>

供将来参考

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

仅限动画背景

1 个答案: