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'对于页面上的一个元素必须是唯一的。没有测试，看看这是不是问题。看看是否有一个“类”名称解决了它。

动画CSS3 - 不起作用

2 个答案: