.animated-tip {
  position: absolute;
  z-index: 999;
  animation: bounce .7s;
  -webkit-animation: bounce .7s;
  /*animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;*/
  animation-iteration-count: 10;
  -webkit-animation-iteration-count: 10;
  animation-direction: alternate;
  -webkit-animation-direction: alternate;
  animation-play-state: running;
  -webkit-animation-play-state: running;
  opacity: 0;
}

.animated-tip .content {
  background-color: #2c3651;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  box-shadow: 2px 2px 5px rgba(0,0,0,.5);
  -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,.5);
  -moz-box-shadow: 2px 2px 5px rgba(0,0,0,.5);
  float: left;
  clear: both;
}

.animated-tip .content .inner {
  margin: 10px;
  float: left;
  color: #FFF;
  font-family: Arial;
}

.animated-tip .arrow {
  width: 0px;
  height: 0px;
  /*margin:0px auto;*/
  margin-left: 5%;
  border-top: 30px solid #2c3651;
  border-left: 5px solid transparent;
  border-right: 20px solid transparent;
  float: left;
  clear: both;
}
@keyframes 
bounce { from {
margin-top:0px;
margin-left:0px;
opacity:0.5
}

to {
  margin-top: 20px;
  opacity: 1
}
}
 @-webkit-keyframes 
bounce { from {
margin-top:0px;
margin-left:0px;
opacity:0.5
}

to {
  margin-top: 20px;
  opacity: 1
}
}