Ответ 1

Я привел его в пример. Я использовал предоставленный вами HTML-код, а затем загрузил анимацию bounceInDown и использовал это для CSS в приведенных ниже примерах.

Пример jsFiddle здесь - метод наведения

JQuery

$(document).ready(function(){
  $('a').hover(function() {
    $("ul").addClass('animated bounceInDown');
  },function(){
    $("ul").removeClass('animated bounceInDown');
  });
});

Если вы хотите добавить задержку при падении, используйте что-то вроде этого:

Пример jsFiddle - метод наведения с задержкой.

$(document).ready(function(){
  $('a').hover(function() {
    $("ul").addClass('animated bounceInDown');
  },function(){setTimeout(function(){
    $("ul").removeClass('animated bounceInDown');
  }, 750);});
});

Эти примеры предполагают, что вы хотите, чтобы анимация срабатывала при наведении. Если вы хотите, чтобы он стрелял по щелчку, используйте что-то вроде этого:

пример jsFiddle - посмотрите ниже альтернативный метод, отличный от JS.

$(document).ready(function(){
  $('a').click(function() {
    $("ul").toggleClass('animated bounceInDown');
  });
});

Альтернативный метод - Нет JS/jQuery

Если вы не хотите использовать JavaScript/jQuery, вы можете использовать checkbox hack в CSS.

Это существенно переключает между :checked, тем самым активируя анимацию.

Пример jsFiddle - он работает во всех текущих браузерах.

HTML

<label id="click" for="dropdown">Click here</label>
<input style="display:none" type="checkbox" id="dropdown">
<ul id="dropdownalerts" class="f-dropdown text-left" data-dropdown-content>
    <li>Facebook</li>
    <li>Email</li>
</ul>

CSS - _{(только его часть) См. приведенный выше пример для полного CSS.}

input[type=checkbox]:checked ~ #dropdownalerts {
    display:inline-block;
    -webkit-animation: bounceInDown 1s both;
    -moz-animation: bounceInDown 1s both;
    -o-animation: bounceInDown 1s both;
    animation: bounceInDown 1s both;
}