Используйте 2 класса animate.css на одном и том же btn

Question

Я пытаюсь сделать анимированную кнопку с помощью Animate.css (http://daneden.me/animate/).

Возможно ли иметь 2 класса на одном элементе? Я хотел бы, чтобы fadeInUpBig случался один раз, затем он мгновенно переворачивается.

Я ценю вашу помощь, спасибо!

Answer 1

Проверьте мой код: http://jsfiddle.net/alexgrcs/GuvWq/4/

Я скачал заказную сборку animate.css только с этими анимация («fadeInUpBig» и «флип») и заявил, как ключевые кадры в одном классе .fullAnimation.

.fullAnimation { 
-webkit-backface-visibility: visible !important; 
-moz-backface-visibility: visible !important; 
-o-backface-visibility: visible !important; 
backface-visibility: visible !important; 
-webkit-animation: fadeInUpBig 1s, flip 1s 1s infinite; 
-moz-animation: fadeInUpBig 1s, flip 1s 1s infinite; 
-o-animation: fadeInUpBig 1s, flip 1s 1s infinite; 
animation: fadeInUpBig 1s, flip 1s 1s infinite; 
-webkit-animation-fill-mode:both; 
-moz-animation-fill-mode:both; 
-ms-animation-fill-mode:both; 
-o-animation-fill-mode:both; 
animation-fill-mode:both; 
} 

Посмотрите на экземпляр анимации, где один ключевой кадр вызывается после того, как с другой стороны, добавление задержки 1 сек до второго. Вы можете найти более подробную информацию об этом методе в этой статье: http://www.css3files.com/animation/

Надеюсь, это поможет! :)