当鼠标悬停在不同的元素上时，CSS3动画开始了吗？

Question

我有一个导航栏，当我将鼠标悬停在列表中的其中一个链接上时，我试图从两个链接中获取两个链接，从关闭页面开始播放动画，并结束旁边的其他链接。

当前导航链接：

<div class="links"> 
    <ul> 
    <li> 
     <a href="#">link 1</a> 
    </li> 
    <li> 
     <a href="#">link 2</a> 
    </li> 
    <li> 
     <a href="#">link 3</a> 
    </li> 
    </ul> 
</div> 

和.links的CSS：

.links ul { 
    white-space: nowrap; 
    list-style-type: none; 
    position: fixed; 
    top: 8px; 
    left: 60%; 
    z-index: 4; 
    width: auto; 
    height: 67px; 
} 

.links li { 
    white-space: nowrap; 
    display: inline-block; 
    margin-right: 30px; 
    z-index: 4; 
    height: 40px; 
} 

而这里的相关CSS，与我目前动画正常工作沿着：

.extralinks { 
    position: fixed; 
    top: 8px; 
    left: 90%; 
    animation-name: slidey; 
    animation-duration: 1s; 
    animation-timing-function: ease; 
    animation-delay: 0s; 
    animation-iteration-count: 1; 
    animation-direction: normal; 
    animation-play-state: running; 
/* Safari and Chrome */ 
    -webkit-animation-name: slidey; 
    -webkit-animation-duration: 1s; 
    -webkit-animation-timing-function: ease; 
    -webkit-animation-delay: 0s; 
    -webkit-animation-iteration-count: 1; 
    -webkit-animation-direction: normal; 
    -webkit-animation-play-state: running; 
    z-index: 4; 
} 

@keyframes slidey { 
    0% {left: 90%; top: 8px;} 
    100% {left: 40%; top: 8px;} 
} 

@-webkit-keyframes slidey /* Safari and Chrome */ { 
    0% {left: 90%; top: 8px;} 
    100% {left: 40%; top: 8px;} 
} 

.links li:nth-child(3) { 
    background-color: Red; 
} 

标记为.extralinks

<div class="extralinks"> 
<ul> 
    <li> 
     <a href="#">link 4</a> 
    </li> 
    <li> 
     <a href="#">link 5</a> 
    </li> 
</ul> 
</div> 

我需要这样做，以便当有人悬停在“链接3”上时，动画链接从右侧滑入，并在我的链接旁边结束。我不太确定如何将动画链接到我的列表中的“链接3”。任何帮助？我不会反对使用javascript/jquery，我只是不太熟练。

谢谢！

Answer 1

我并不完全清楚你的目标，但我做了一些假设，并将jsFiddle打了一起。我使用css转换，因为我认为它是一个：悬停动画，这允许子菜单返回到它的位置。

* { 
    padding:0; 
    margin:0; 
} 
.links { 
    width:100%; 
} 
.links > menu { 
    width:100%; 
    text-align:center; 
} 

.links menu li { 
    display: inline-block; 
    position:relative; 
    padding:0.75em 1em; 
} 
.l3 .extralinks { 
    position:absolute; 
    top:2em; 
    left:100%; 
    z-index: 4; 

    -webkit-transition:all 1s ease-in-out 0s; 
    -moz-transition:all 1s ease-in-out 0s; 
    -o-transition:all 1s ease-in-out 0s; 
    -ms-transition:all 1s ease-in-out 0s; 
    transition:all 1s ease-in-out 0s; 
} 
.l3:hover .extralinks { 
    left:0;  
} 
.l3:hover .extralinks li { 
    display:block; 
} 
.links li:nth-child(3) { 
    background-color: Red; 
} 

    <div class="links"> 
     <menu> 
     <li> 
      <a href="#">link 1</a> 
     </li> 
     <li> 
      <a href="#">link 2</a> 
     </li> 
     <li class="l3"> 
      <a href="#">link 3</a> 
      <menu class="extralinks"> 
       <li> 
        <a href="#">link 4</a> 
       </li> 
       <li> 
        <a href="#">link 5</a> 
       </li> 
      </menu> 
     </li> 
     </menu> 
    </div>