Messages appear below the block, I made an animation on the appearance of the message itself.

$('#ck').click(function(){ $('.inner').append('<div class="block">Сообщение</div>'); }); 
 .block { width: 100px; height: 20px; background: green; margin: 10px; color:white; animation: error .3s; } .cont { border: 1px solid black; height: 400px; position: relative; } .inner { position: absolute; bottom: 0; } @keyframes error { 0% { transform: scale(.2); } 25% { transform: rotate(7deg) scale(1) } 50% { transform: rotate(-7deg) } 75% { transform: rotate(7deg) } 100% { transform: rotate(0deg) } } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="ck">клик</button> <div class="cont"> <div class="inner"></div> </div>

thoughts do not come to my head how to make it so that when the message from below appears, it gradually shifted the rest of the messages up (now instantly). well, or if you have other ideas on how to make this kind of non-naive and smooth appearance of messages of this kind, I will listen to your suggestions

    1 answer 1

     $('#ck').click(function(){ $('.inner').append('<div class="block">Сообщение ' + Math.floor(Math.random() * (9 - 0)) + '</div>'); }); 
     .block { display: block; padding: 3px 6px 3px 6px; border-radius: 2px; height: 20px; background: green; margin: 10px; color:white; animation: error .4s; } .cont { border: 1px solid black; height: 180px; position: relative; overflow: hidden; } .inner { position: absolute; bottom: 0; } @keyframes error { 0% { height: 0px; margin-top: -16px; } 100% { height: 20px; margin-bottom: ''; } } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> <button id="ck">клик</button> <div class="cont"> <div class="inner"></div> </div>