javascript - 将鼠标悬停在不同的元素上时，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 transitions，因为我假设它是一个 :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>