将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过渡，因为我假设它是：hover动画，这允许子菜单返回其位置。

* {
    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>