How to enable animation after page load?

Question

css

There is a piece of code in which the animation is turned on when the button is clicked:

$(function() {
$("#anm3").click(function(){
  $("#bounce").addClass("animated fadeIn");
});
});

How to do the same, only immediately when the page loads? for the element to appear.

Answer 1

$(document).ready( function(){
  $("#bounce").addClass("animated fadeIn");
} );

Answer 2

Adding a menu wrapper

<div class="menu__wrapper">
  <div class="menu">
  ...
  </div>
</div><!--/.menu__wrapper (отмечаем конец обертки, дабы не путать с другими закрывающими тегами) -->

We stretch the wrapper, and center the contents of the menu inside relative to it:

.menu__wrapper {
  width: 100%;
  margin: 0 auto;
}
.menu {
  width: auto;
  margin: 0;
  text-align: center;
}

Вот что получилось codepen
Таким образом меню центрируется при любой ширине экрана, и при изменении ширины из-за добавления пунктов меню, будет оставаться центрированной. Если по какой-то причине такое центрирование мешает. Можно подобрать ширину div.menu, при которой margin: 0 auto; будет продолжать выравнивать блок по центру. Но тогда возникнет проблема с расширением меню при добавлении пунктов.

Answer 3

.menu {
text-align: center;
}
.menu ul {
display: inline-block;
}

Answer 4

Give the menu class a fixed width and center align with margin

.menu {
    witdh: 616px;
    margin: 0 auto;
}

Answer 5

use relative rather than absolute positioning of the menu, and set the left margin to 35%