不使用边距的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;