CSS3不使用保證金的振動動畫

Question

我有一組6個字符串，當我將它們懸停在其上時，我想要振動。爲此，我在邊距上使用關鍵幀，如此處所示http://jsfiddle.net/A4nBv/1/

問題是，更改邊距（例如在頂部字符串上進行懸停時），將其餘字符串向下推，出現所有琴絃正在振動。我只需要一個字符串振動，任何人都可以想出使用CSS的解決方案？

<div class="strings"> 
    <div class="string" id="stringHighE"></div> 
    <div class="string" id="stringB"></div> 
    <div class="string" id="stringG"></div> 
    <div class="string" id="stringD"></div> 
    <div class="string" id="stringA"></div> 
    <div class="string" id="stringLowE"></div> 
</div> 

body, html{ 
    height:100%; 
    width:100%; 

}.strings { 
    height:100%; 
    width:100%; 
} 
.string { 
    height:2%; 
    margin-bottom:2%; 
    background: black; 
} 
#stringLowE:hover, #stringA:hover, #stringDhover, #stringG:hover, #stringB:hover, #stringHighE:hover { 
    animation:vibrate 0.1s linear 0s infinite; 
    -moz-animation: vibrate 0.1s linear 0s infinite; 
    /* Firefox */ 
    -webkit-animation: vibrate 0.1s linear 0s infinite; 
    /* Safari and Chrome */ 
    -o-animation: vibrate 0.1s linear 0s infinite; 
    /* Opera */ 
} 
@keyframes vibrate { 
    0% { 
     padding-top: 0px; 
    } 
    25% { 
     padding-top: -3px; 
    } 
    50% { 
     padding-top: 0px; 
    } 
    75% { 
     padding-top: 3px; 
    } 
    100% { 
     padding-top: 0px; 
    } 
} 
@-moz-keyframes vibrate 
/* Firefox */ 
{ 
    0% { 
     padding-top: 0px; 
    } 
    25% { 
     padding-top: -3px; 
    } 
    50% { 
     padding-top: 0px; 
    } 
    75% { 
     padding-top: 3px; 
    } 
    100% { 
     padding-top: 0px; 
    } 
} 
@-webkit-keyframes vibrate 
/* Safari and Chrome */ 
{ 
    0% { 
     padding-top: 0px; 
    } 
    25% { 
     padding-top: -3px; 
    } 
    50% { 
     padding-top: 0px; 
    } 
    75% { 
     padding-top: 3px; 
    } 
    100% { 
     padding-top: 0px; 
    } 
} 
@-o-keyframes vibrate 
/* Opera */ 
{ 
    0% { 
     padding-top: 0px; 
    } 
    25% { 
     padding-top: -3px; 
    } 
    50% { 
     padding-top: 0px; 
    } 
    75% { 
     padding-top: 3px; 
    } 
    100% { 
     padding-top: 0px; 
    } 
} 

Answer 1

一個簡單的解決方案是設置position：relative並使用top屬性。

Working JSFiddle

@keyframes vibrate { 
    0% { 
     top: 0px; 
    } 
    25% { 
     top: -3px; 
    } 
    50% { 
     top: 0px; 
    } 
    75% { 
     top: 3px; 
    } 
    100% { 
     top: 0px; 
    } 

〜3秒後停止動畫，只是讓它循環3 /持續時間。 Updated JSFiddle

animation:vibrate 0.1s linear 0s 30;