сообщения появляются снизу блока, я сделал анимацию на появление самого сообщения.
$('#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>
мысли в голову не приходят как сделать так что б когда сообщение снизу появляется, оно плавного сдвигало остальные сообщения вверх(сейчас мгновенно). ну или если у вас есть другие идеи, как сделать не навящивое и плавное появления сообщений такого вида, выслушаю ваши предложения