Question

我遇到了一些麻烦我的第一个动画在页面加载时工作正常，但我想在你悬停图元素时触发另一个动画，如果你这样做，第一个动画重复，但显然，如果你把鼠标放在红色框上并强制它转到原来的位置，然后我的第二个动画工作：/

关键帧是元素属于它的第一个位置吗？我做到了绝对，是同样的事情。你可以在这里看到工作代码： http://jsfiddle.net/zhk7w/ 谢谢你的手！

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

和css：

#sharing-wrapper figure{
margin-left: 50px;
position: relative;
width: 20px;
height: 20px;
}
#sharing-wrapper figure{
padding: 15px;
background-color: red;
position: relative;
-webkit-animation-name:animatetopbottom,animateleft;
-webkit-animation-duration:3s,3s;
-webkit-animation-fill-mode:forwards;
/*-webkit-animation-direction:alternate;*/
}
#sharing-wrapper figure:hover{
-webkit-animation: shakeit 1s;}

动画：

    @-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; }
    }

Answer 1

你应该在动画停留之前给予动画延迟。

一旦你将鼠标悬停在盒子上，它就会离开鼠标，并且：hover不再是活动状态，接下来或defaut动画立即接管： http://jsfiddle.net/zhk7w/1/

#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;*/
}

Css3针对不同状态的不同关键帧

1 个答案: