html - Css3 Body Animation 使选择表单中的选项抽搐

Question

jsfiddle：http: //jsfiddle.net/Dm7uE/

HTML：

<form action="delete.php" method="get">
    <label for="delete">DELETE ONE</label>
    <select name="id">
        <option value="test">test</option>
        <option value="test">test</option>
        <option value="test">test</option>
    </select>    
</form>

CSS

@-moz-keyframes pulse 
{
    0% {background-color: #45CEEF;}
    25% {background-color: #FFF5A5;}
    50% {background-color: #FFD4DA;}
    75% {background-color: #99D2E4;}
    100% {background-color: #D8CAB4;}
}
@keyframes pulse
{
    0% {background-color: #45CEEF;}
    25% {background-color: #FFF5A5;}
    50% {background-color: #FFD4DA;}
    75% {background-color: #99D2E4;}
    100% {background-color: #D8CAB4;}
}
@-webkit-keyframes pulse {
    0% {background-color: #45CEEF;}
    25% {background-color: #FFF5A5;}
    50% {background-color: #FFD4DA;}
    75% {background-color: #99D2E4;}
    100% {background-color: #D8CAB4;}
}
body
{
    -webkit-animation: pulse 80s infinite alternate;
    -moz-animation: pulse 80s infinite alternate;
    animation: pulse 80s infinite alternate;
    background-color: #45CEEF;
}

出于某种原因，当我有一个脉动的背景时，它会弄乱我的选择选项。如果您尝试将鼠标悬停在表单中的某个选项上，它只会来回抽动.. 是什么原因造成的，我该如何解决？谢谢

编辑：如果我删除 CSS，表单会正常工作。

Answer 1

我一直在玩小提琴并环顾各个站点-它们都以与您相同的方式实现它-我想唯一的其他选择是使用JS？