背景圖像動畫

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這樣的僞選擇器事件。