CSS3 div移动悬停时没有缓动效果

Question

好的，这里是问题：我创建了一个简单的菜单，其中包含三个菜单项，我希望每次将鼠标悬停在其上时将每个div向右移动（简单吧？但不幸的是...）。

虽然它可以做出缓入动画，但它不会做出缓出动画，结果不流畅，而且一点也不酷。

我在网上和StackOverflow上搜索并应用了所有修复/建议，但我无法使其正常工作。

以下是代码（例如，在jsFiddle上尝试）：

HTML:

<div id="menu-container">
   <div class="menu1">Menu 01</div>
   <div class="menu2">Menu 02</div>
   <div class="menu3">Menu 03</div>
</div>

CSS：

#menu-container div{
    height: 30px;
    width: 200px;
    border:1px solid #999;
    background-color:#222;
    color:#ccc;
    left: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

#menu-container div:hover{
    position: relative;
    color:#fff;
    background-color:#333333;
    left: 20px;
    padding-left: -20px;
}

#menu-container div.menu1:hover{
    border-color: red;
}

#menu-container div.menu2:hover{
    border-color: blue;
}

#menu-container div.menu3:hover{
    border-color: green;
}

我做错了什么？有没有办法修复它？谢谢提前。

- user2701715

---

我对“尝试在jsFiddle上尝试”感到好笑...为什么不给我们做一个jsfiddle呢？我知道我很懒，不想把你的所有代码都复制粘贴到一个新的fiddle中。 - brbcoding

这个链接http://css3.bradshawenterprises.com/transitions/有帮助吗？我希望它有用。该链接基本上提供了关于CSS3过渡效果的一些信息，以及如何在跨浏览器中使用它们。 - Afzaal Ahmad Zeeshan

@Afzaal Ahmad Zeeshan，感谢您提供的链接，非常有用！ - user2701715

还有，负边距是不存在的。 - RoToRa

Answer 1

这是因为在悬浮时，div仅具有position: relative属性，这不可动画化。当它切换回position: static时，left上的动画效果就会丢失。只需在未悬浮的样式中添加position: relative即可解决问题。 http://jsfiddle.net/Pre5p/

- Explosion Pills

Answer 2

根据您的浏览器对此类动画的支持情况，您应该使用transform: translate。这样可以获得更流畅的动画效果...

#menu-container div:hover{
    color:#fff;
    background-color:#333333;

    -webkit-transform: translateX(20px); 
    -moz-transform: translateX(20px); 
    -ms-transform: translateX(20px); 
    -o-transform: translateX(20px); 
    transform: translateX(20px); 
}

- Andreas Daoutis