div#ani_001{
  position:absolute;
  top:0px;
  left:-500px;
  width:200px;
  height:100px;
  padding:20px;
  background: white; 
  font-size:23px;
  font-weight:bold;
  line-height:120%;
  
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
  
  /* ¾Ö´Ï¸ÞÀÌ¼Ç À̸§ */
  animation-name: yanimat1;
  animation-duration:2s;
  animation-duration: leaner;
  animation-delay: 0s;   /* 2s ½ÃÀÛ */
  animation-iteration-count : 1; /* Çѹø Àç»ý */
  animation-direction : normal;
  animation-fill-mode: forwards;
  transform: translateX(-50%); /* ÁÂÇ¥ Áß°£¿¡ À§Ä¡ */
  opacity: 0; /* ÁÂÇ¥ Áß°£¿¡ À§Ä¡ */
 
}

/* Å°ÇÁ·¹ÀÓ À̸§ = ¾Ö´Ï¸ÞÀÌ¼Ç À̸§ */
@-webkit-keyframes yanimat1 {
  0% {
    left:0px; opacity: 0;
  }
  
  
  100% {
      top:20px;
left:80%; 
    opacity: 1;
  }
}



div#ani_002{
  position:absolute;
  top:0px;
  left:-500px;
  width:100px;
  height:100px;
  /* ¾Ö´Ï¸ÞÀÌ¼Ç À̸§ */
  animation-name: yanimat2;
  animation-duration:2s;
  animation-duration: leaner;
  animation-delay: 5s;   /* ½ÃÀÛ */
  animation-iteration-count : 1; /* Çѹø Àç»ý */
  animation-direction : normal;
  animation-fill-mode: forwards;
  transform: translateX(-50%); /* ÁÂÇ¥ Áß°£¿¡ À§Ä¡ */
  opacity: 0; /* ÁÂÇ¥ Áß°£¿¡ À§Ä¡ */
 
}

/* Å°ÇÁ·¹ÀÓ À̸§ = ¾Ö´Ï¸ÞÀÌ¼Ç À̸§ */
@-webkit-keyframes yanimat2 {
  0% {
    left:0px; opacity: 0;
  }
  
  
  100% {
      top:500px;
left:50%; 
    opacity: 1;
  }
}