Css3 разные ключевые кадры для разных состояний

у меня проблемы с этим. Моя первая анимация работает нормально при загрузке страницы, но я хочу вызвать другую анимацию при наведении на элемент фигуры, если вы это сделаете, первая анимация повторяется, но видимо, если вы поместите мышь над красным полем и заставить его вернуться в исходное положение, тогда моя вторая анимация работает :/

Это с ключевыми кадрами элемент принадлежит его первой позиции? я сделал это абсолютным и это то же самое. Вы можете увидеть рабочий код здесь: 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; }
    }

css css-animations hover
person user2430929    schedule 16.06.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

вы должны дать задержку анимации, прежде чем они наведут курсор.

Как только вы наводите курсор на поле, оно смещается от мыши, и :hover больше не является активным состоянием, сразу же вступает в действие следующая анимация или анимация по умолчанию: 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;*/
}
person G-Cyrillus    schedule 16.06.2013
comment
Спасибо за ваше время: D .. это помогает, дело в том, что после первой анимации я хочу, чтобы поле оставалось там, где оно закончилось, и чтобы анимация наведения происходила в том же месте, где закончилась первая анимация, я дал ей абсолютную положение, но поле возвращается в исходное положение :/ - person user2430929; 17.06.2013
comment
совет: когда анимация завершена, исходные правила больше не перезаписываются. - person G-Cyrillus; 17.06.2013