Css3不同状态的不同关键帧

我有点麻烦 加载页面时，我的第一个动画工作正常，但我想在您悬停figure元素时触发另一个动画，如果执行此操作，第一个动画将重复，但显然，如果您将鼠标放在红色框上并强制其转到原始位置，则我的第二个动画工作：/

对于关键帧，元素是否属于其第一个位置？我把它绝对化了，这是一样的。 您可以在此处看到工作代码： 谢谢你的帮忙

<div id="wrapper">
        <article>
            <div id="sharing-wrapper">
                <figure>
                <a class="animate" href="#">p</a>
                </figure>

            </div>
            <div class="test">
                <a class="test" href="">C</a>
            </div>
        </article>
    </div>

动画：

    @-webkit-keyframes animateleft{
    from {left: 0px;}
    to {left: 50px;}
}

@-webkit-keyframes animatetopbottom{
    0% {top: 0px;}
    10% {top: 90px;}
    20% {top: 60px;-webkit-transform:rotate(680grad);}
    30% {top: 90px;-webkit-transform:scale(0.7);}
    40% {-webkit-transform:scale(1.5);}
    50% {top: 60px;-webkit-transform:rotate(0grad);}
    80% {top: 80px;}
    100% {top: 80px;}

}



    @-webkit-keyframes shakeit{
    from { top: 25px; }
    to { top: -40px; }
    }

---

在动画悬停之前，你应该给它一个延迟

将长方体悬停后，它将从鼠标移开：悬停不再是活动状态，下一步或删除动画将立即接管：

---

谢谢你抽出时间：D。。这有助于，事情是，在第一个动画之后，我希望长方体保持在它完成的位置，悬停动画发生在第一个动画完成的相同位置，我给了它绝对位置，但长方体返回到其原始位置：/tip：动画完成后，原始规则不再被覆盖。

    @-webkit-keyframes animateleft{
    from {left: 0px;}
    to {left: 50px;}
}

@-webkit-keyframes animatetopbottom{
    0% {top: 0px;}
    10% {top: 90px;}
    20% {top: 60px;-webkit-transform:rotate(680grad);}
    30% {top: 90px;-webkit-transform:scale(0.7);}
    40% {-webkit-transform:scale(1.5);}
    50% {top: 60px;-webkit-transform:rotate(0grad);}
    80% {top: 80px;}
    100% {top: 80px;}

}



    @-webkit-keyframes shakeit{
    from { top: 25px; }
    to { top: -40px; }
    }

#sharing-wrapper figure{
    padding: 15px;
    background-color: red;
    position: relative;
    -webkit-animation-delay:1s;
    -webkit-animation-name:animatetopbottom,animateleft;
    -webkit-animation-duration:3s,3s;
    -webkit-animation-fill-mode:forwards;
    /*-webkit-animation-direction:alternate;*/
}