<div class="content">
  <div class="star1"><img src="https://gimmicklog.com/demo/timeout/star-s.png" ></div>
  <div class="star2"><img src="https://gimmicklog.com/demo/timeout/star-m.png" ></div>
  <div class="star3"><img src="https://gimmicklog.com/demo/timeout/star-l.png" ></div>
</div>
.content {
  width:222px;
  height:213px;
  margin: 50px auto;
  position:relative;
}
.star1,.star2,.star3 {
  opacity:0;
  position:absolute;
}
.star1{
  left:55px;
  top:57px;
}
.star2 {
  left:30px;
  top:32px;
}
.star3 {
  left:0;
  top:0;
}
.animated {
  opacity: 1;
}
$(function() {
  setTimeout('ani1()', 1000); //1秒後に実行
  setTimeout('ani2()', 2000); //2秒後に実行
  setTimeout('ani3()', 3000); //3秒後に実行
});

function ani1() {
  $('.star1').addClass('animated bounceIn'); //アニメーション用のクラスを追加
}

function ani2() {
  $('.star2').addClass('animated flipInY');
}

function ani3() {
  $('.star3').addClass('animated flipInX');
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js