动画 CSS3 - 不起作用

Question

我正在研究一个小的CSS3菜单。这里的现场示例：http://jsfiddle.net/e592S/

（代码满了很长）

/*Fifth Box*/
@-webkit-keyframes myFifth {
    0% {
        right: 300px;
        top: 13px;
        background: #D0D0D0;
        opacity: 0;
    }
    100% {
        background: #909090;
        right: 300px;
        top: 63px;
        opacity: 1;
    }
}
#box.box5 {
    top: 113px;
}
#littlebox5 {
    top: 053px;
    position: relative;
}
#bothcontaine5:hover ~ .box5 {
    -webkit-transition: all 0s;
    right: 300px;
    top: 63px;
    -webkit-animation: myFifth .75s;
    -webkit-animation-fill-mode: initial;
    opacity: 1;
    background: #909090;
    right: 300px;
    -webkit-animation-fill-mode: initial;
}
#bothcontainer5:hover .littlebox-sentence {
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#D0F2F9), to(#84CEFB));
}
#bothcontainer5:hover .triangle {
    border-right: 20px solid #909090;
}

问题是第四个和第五个不起作用（代码完全相同）。 第一个第二个第三个框工作正常。我的想法是我怎样才能解决这个问题，以便所有盒子都能工作？

希望得到帮助。谢谢

Answer 1

不太

清楚问题是什么，但正如@rob所说，你有，并且可能仍然有 html 错误，例如多个 id，当 id 在 DOM 中必须是唯一的时，为了您自己的理智，您应该尝试在代码中 DRY相同的动画可以应用于所有框，例如，您不必重复它。
我所做的是从id开始逐步重构您的代码

<div class="box3 box">

更正代码 ： http://jsfiddle.net/e592S/1/

Answer 2

"id"对于页面上的一个元素必须是唯一的。没有测试以查看这是否是问题所在。看看将其作为"类"名称是否可以解决它。