CSS3 анимация с ключевыми кадрами - PullRequest
Новая
       20

CSS3 анимация с ключевыми кадрами

3 голосов
/ 12 декабря 2011

Я делаю анимацию css3 с ключевыми кадрами.Но у меня есть проблема.Это мой код: 

a[title*="in je favorieten"]:hover {
    -moz-animation-duration: 1s;
    -webkit-animation-duration: 1s;
    -moz-animation-name: slidein;
    -webkit-animation-name: slidein;
    -moz-animation-iteration-count: 3;
    -webkit-animation-iteration-count: 3;
    -moz-animation-direction: alternate;
    -webkit-animation-direction: alternate;
}

@-moz-keyframes slidein {
    from {
        width: 25px;
    }

    to {
        width: 80px;
    }
}

@-webkit-keyframes slidein  {
    from {
        width: 25px;
    }

    to {
        width: 80px;
    }
}

Проблема в том.Когда я парю элемент.Элемент a должен быть установлен на ширину 80. Когда я зависаю.Затем элемент должен быть возвращен на 25 ширины.Но сейчас я парю, и он делает анимацию.А потом он возвращается к 25. Как я могу это исправить?

Спасибо!

Ответы [ 2 ]

1 голос
/ 12 декабря 2011

за исключением того, что подход также не верен ... Вы должны придерживаться перехода, как сначала написал Абхишек.

Для CSS3-анимации с ключевыми кадрами вы должны проверить спецификации. В основном, ваш код говорит: «делайте анимацию, указанную в« slidein »/« slideout »3 раза подряд с чередующимся направлением (слева направо / справа налево)».

Удалите следующие 3 строки и включите код Абхишека, чтобы он работал (лучше) 

-moz-animation-iteration-count: 3;
-webkit-animation-iteration-count: 3;
-moz-animation-direction: alternate;
-webkit-animation-direction: alternate;

хотя это может привести к тому, что слой не будет отображаться при загрузке страницы (не проверял)

ссылка: http://www.w3.org/TR/css3-animations/#animation-iteration-count

1 голос
/ 12 декабря 2011

То, что вы хотите, не очень хорошая идея для реализации с помощью анимации,

Попробуйте использовать переходы CSS3 [поддержка та же]

Вот пример кода 

a{ 

 display:inline-block;
 width:25px;
 -moz-transition: width 1s; // Mozzilla
 -webkit-transition: width 1s; // Webkit
 transition: width 1s; // W3C
}

a:hover{
 // with a simple trickary this can be used to generate the same results what you want.
  width:100px;
}

И если вы все еще хотите следовать анимации

Просто добавьте правило, гласящее 

 a[title*="in je favorieten"]{
-moz-animation-duration: 1s;
-webkit-animation-duration: 1s;
-moz-animation-name: slideout;
-webkit-animation-name: slideout;
-moz-animation-iteration-count: 3;
-webkit-animation-iteration-count: 3;
-moz-animation-direction: alternate;
-webkit-animation-direction: alternate;
 }


 @-moz-keyframes slideout {
    from {
        width: 80px;
     }

     to {
        width: 25px;
     }
   }

@-webkit-keyframes slideout  {
    from {
        width: 80px;
     }

    to  {
       width: 25px;
   }
}
...