Javascript CSS3动画在悬停在不同元素上时开始？

我有一个导航栏，我正试图从页面外获取两个链接来设置动画，当我将鼠标悬停在列表中的一个链接上时，它会在其他链接旁边结束

当前导航链接：

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

下面是相关的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，我只是对这两种语言都不太精通

---

谢谢大家!

我不太清楚你的目标，但我做了一些假设，然后打了个电话。我使用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>

*{
填充：0；
保证金：0；
}
.链接{
宽度：100%；
}
.链接>菜单{
宽度：100%；
文本对齐：居中；
}
.链接菜单李{
显示：内联块；
位置：相对位置；
填料：0.75em 1em；
}
.l3.外部链接{
位置：绝对位置；
顶部：2米；
左：100%；
z指数：4；
-webkit转换：所有1都易于输入输出0；
-moz转换：所有1都在0中缓进；
-o型转换：所有1均易于输入输出0；
-ms转换：所有1都易于输入输出0；
转换：所有的1从0变为0；
}
.l3:悬停。外部链接{
左：0；
}
.l3:悬停。外部链接li{
显示：块；
}
.links li:第n个孩子（3）{
背景色：红色；
}

外部链接的标记是什么样子的？（它与

.links

容器的相对位置在哪里）？用额外的信息编辑了我的帖子！谢谢你的回复！

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