當鼠標懸停在不同的元素上時，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>