背景图像动画

Question

我试图给导航栏按钮设置动画效果，我希望li标签背景中的图像上下反弹，而文本（图像）保持不动。

我知道有没有直接的CSS方法来动画背景图像，但我试图考虑到这一点。

请参阅以下的jsfiddle链接，我的代码：

http://jsfiddle.net/JTp6x/

#Home 
{ 
    position: absolute; 
    width:125px; 
    height:100px; 
    background: transparent url('Images/Icons/HomeIcon.png') no-repeat top center; 
-webkit-animation-fill-mode:both; 
-moz-animation-fill-mode:both; 
-ms-animation-fill-mode:both; 
-o-animation-fill-mode:both; 
animation-fill-mode:both; 
-webkit-animation-duration:1s; 
-moz-animation-duration:1s; 
-ms-animation-duration:1s; 
-o-animation-duration:1s; 
animation-duration:1s;} 
.animated.hinge 
{ 
-webkit-animation-duration:2s; 
-moz-animation-duration:2s; 
-ms-animation-duration:2s; 
-o-animation-duration:2s; 
animation-duration:2s; 
} 

@-webkit-keyframes bounce { 
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 
     40% {-webkit-transform: translateY(-30px);} 
    60% {-webkit-transform: translateY(-15px);} 
} 

@-moz-keyframes bounce { 
    0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);} 
    40% {-moz-transform: translateY(-30px);} 
    60% {-moz-transform: translateY(-15px);} 
} 

@-o-keyframes bounce { 
    0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);} 
    40% {-o-transform: translateY(-30px);} 
    60% {-o-transform: translateY(-15px);} 
} 
@keyframes bounce { 
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 
    40% {transform: translateY(-30px);} 
    60% {transform: translateY(-15px);} 
} 

#Home:hover { 
    -webkit-animation-name: bounce; 
    -moz-animation-name: bounce; 
    -o-animation-name: bounce; 
    animation-name: bounce; 
} 

是为动画

Answer 1

其实动画方法和关键帧，它是可以动画一CSS中的背景图像，而不移动内容，只要符合某些条件即可。

您的图片链接是一个相对链接，您的代码有一些东西妨碍了我的创作，所以我创建了一个新的小提琴，它使用wikimedia公用图片上的图片，可以达到类似的效果。根据你所说的你想要做的事情，我把它放在一个<li>元素中，大致重用了你的@keyframes。

的小提琴是在这里：http://jsfiddle.net/raphaelvalerio/SbAkP/

<ul> 
    <li id="bouncy-background">stuff that absolutely should not move at all in any way. Ever.</li> 
    <li>another item</li> 
    <li>another item</li> 
</ul> 

的CSS（与简洁，删除供应商前缀看到小提琴的完整版本。）：

#bouncy-background { 
width: 100%; 
height: 400px; 
background-color: goldenrod; 
background-image: url('http://upload.wikimedia.org/wikipedia/commons/7/71/William_Shatner.jpg'); 
background-repeat: no-repeat; 
background-size: auto 200px; 
background-position: center bottom; 
animation-name: bounce; 
animation-duration: 2s; 
animation-fill-mode: both; 
} 

@keyframes bounce { 
0%, 20%, 50%, 80%, 100% {background-position: center bottom;} 
40% {background-position: center top;} 
60% {background-position: center 75%;} 
} 

这里最重要的是什么你是动画。你可以动画大多数具有计算值的元素，比如百分比，像素等。在这种情况下，我不是动画背景本身，而是background-position规则，因为它是一个计算值。

看看小提琴并随身携带，看看您是否可以改变我的秘方，使其符合您的想法。

另请注意，目前动画只是在加载时启动，但您可以将它连接到像:hover这样的伪选择器事件。