Loop the script









up vote
-2
down vote

favorite












(I added jsfiddle since Stack snippet is down): https://jsfiddle.net/5xopbujL/



I broke my head trying to fix the scrip working. I have the following simple javascript:






$(document).ready(function() 
 showMessage();
 setInterval(function() 
 $(".msg-content").empty();
 showMessage();
 , 7000);
)

:root 
 --msg-content-height: 26.75em;
 --msg-spacing: 1em;
 --msg1-height: 5.5em;
 --msg2-height: 4em;
 --msg3-height: 2.5em;
 --msg4-height: 2.5em;
 --msg5-height: 4em;
 --msg6-height: 3.25em;


.msg-send 
 position: absolute;
 animation-iteration-count: 1;
 animation-duration: 8s;
 animation-fill-mode: forwards;


.msg-receive 
 position: absolute;
 animation-iteration-count: 1;
 animation-duration: 8s;
 background-color: #2d67ff;
 color: #ffffff;
 animation-fill-mode: forwards;


.msg-container 
 width: 28em;


.msg-content 
 height: var(--msg-content-height);



/*Animation Names*/

#msg1 
 animation-name: msg1;


#msg2 
 animation-name: msg2;


#msg3 
 animation-name: msg3;


#msg4 
 animation-name: msg4;


#msg5 
 animation-name: msg5;


#msg6 
 animation-name: msg6;



/*Key Frames*/

@keyframes msg1 
 0% 
 top: calc(var(--msg-content-height) - var(--msg1-height));
 left: -4em;
 transform: scale(0);
 
 5% 
 top: calc(var(--msg-content-height) - var(--msg1-height));
 left: 0;
 transform: scale(1);
 
 12% 
 top: calc(var(--msg-content-height) - var(--msg1-height));
 
 17% 
 top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height));
 
 30% 
 top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height));
 
 35% 
 top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height));
 
 49% 
 top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height));
 
 54% 
 top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
 
 70% 
 top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
 
 75% 
 top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
 
 95% 
 top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
 
 100% 
 top: 0;
 left: 0;
 


@keyframes msg2 
 0% 
 top: calc(var(--msg-content-height) - var(--msg2-height));
 right: 0;
 transform: scale(0);
 opacity: 0;
 
 12% 
 top: calc(var(--msg-content-height) - var(--msg2-height));
 right: -4em;
 transform: scale(0);
 
 17% 
 top: calc(var(--msg-content-height) - var(--msg2-height));
 right: 0;
 transform: scale(1);
 opacity: 1;
 
 30% 
 top: calc(var(--msg-content-height) - var(--msg2-height));
 
 35% 
 top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height));
 
 49% 
 top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height));
 
 54% 
 top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
 
 70% 
 top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
 
 75% 
 top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
 right: 0;
 
 95% 
 top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
 
 100% 
 top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height) - var(--msg-spacing) - var(--msg6-height));
 right: 0;
 


@keyframes msg3 
 0% 
 top: calc(var(--msg-content-height) - var(--msg3-height));
 left: -4em;
 opacity: 0;
 transform: scale(0);
 
 30% 
 top: calc(var(--msg-content-height) - var(--msg3-height));
 opacity: 0;
 transform: scale(0);
 
 35% 
 top: calc(var(--msg-content-height) - var(--msg3-height));
 left: 0;
 transform: scale(1);
 opacity: 1;
 
 49% 
 top: calc(var(--msg-content-height) - var(--msg3-height));
 
 54% 
 top: calc(var(--msg-content-height) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
 
 70% 
 top: calc(var(--msg-content-height) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
 
 75% 
 top: calc(var(--msg-content-height) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
 left: 0;
 
 95% 
 top: calc(var(--msg-content-height) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
 
 100% 
 top: calc(var(--msg-content-height) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height) - var(--msg-spacing) - var(--msg6-height));
 left: 0;
 


@keyframes msg4 
 0% 
 top: calc(var(--msg-content-height) - var(--msg4-height));
 right: -4em;
 opacity: 0;
 transform: scale(0);
 
 49% 
 top: calc(var(--msg-content-height) - var(--msg4-height));
 right: -4em;
 opacity: 0;
 transform: scale(0);
 
 54% 
 top: calc(var(--msg-content-height) - var(--msg4-height));
 right: 0;
 transform: scale(1);
 opacity: 1;
 
 70% 
 top: calc(var(--msg-content-height) - var(--msg4-height));
 
 75% 
 top: calc(var(--msg-content-height) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
 right: 0;
 
 95% 
 top: calc(var(--msg-content-height) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
 
 100% 
 top: calc(var(--msg-content-height) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height) - var(--msg-spacing) - var(--msg6-height));
 right: 0;
 


@keyframes msg5 
 0% 
 top: calc(var(--msg-content-height) - var(--msg5-height));
 left: -4em;
 opacity: 0;
 transform: scale(0);
 
 70% 
 top: calc(var(--msg-content-height) - var(--msg5-height));
 left: -4em;
 opacity: 0;
 transform: scale(0);
 
 75% 
 top: calc(var(--msg-content-height) - var(--msg5-height));
 left: 0;
 transform: scale(1);
 opacity: 1;
 
 95% 
 top: calc(var(--msg-content-height) - var(--msg5-height));
 
 100% 
 top: calc(var(--msg-content-height) - var(--msg5-height) - var(--msg-spacing) - var(--msg6-height));
 left: 0;
 transform: scale(1);
 opacity: 1;
 


@keyframes msg6 
 0% 
 top: calc(var(--msg-content-height) - var(--msg6-height));
 right: -4em;
 opacity: 0;
 transform: scale(0);
 
 95% 
 top: calc(var(--msg-content-height) - var(--msg6-height));
 right: 0;
 opacity: 0;
 transform: scale(0);
 
 100% 
 top: calc(var(--msg-content-height) - var(--msg6-height));
 right: 0em;
 opacity: 1;
 transform: scale(1);
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="msg-container pv4 ph4 br3 center bg-white shadow-6">
 <div class="msg-content w-100 relative">
 <div id="msg1" class="msg-receive dib mb4 bg-message br4 pv2 ph3 white measure-narrow">Message #1</div>
 <div id="msg2" class="msg-send dib mb4 bg-near-white br4 pv2 ph3 mid-gray measure-narrow">Message #2 </div>
 <div id="msg3" class="msg-receive dib mb4 bg-message br4 pv2 ph3 white measure-narrow">Message #3</div>

 </div>
</div>





Everything is almost fine but I can't find a way how to hide the "message" block as soon as it reaches the --msg-content-height . And how to loop the messages? So how to make the messages disappear when they reaches the top and loop them?






javascript jquery html css







share|improve this question



















  • 2




    The stack snippet is not down, you just didn't add the showMessage() function.
    – Mark Baijens
    Nov 9 at 13:39










  • Hello @mark-baijens , Service Unavailable HTTP Error 503. The service is unavailable.
    – Jamdev
    Nov 9 at 13:41







  • 1




    You asked this two hours ago already, stackoverflow.com/questions/53224959/… Please do not create such duplicates! (You could have still added the fiddle to your existing question by editing it.)
    – misorude
    Nov 9 at 13:59






  • 1




    @astonearachnid maybe it would be better to mark that first question as duplicate, because here someone answered...
    – barbsan
    Nov 9 at 14:12










  • @Jamdev, I do not get such error. Also you did seem to be able to provide a snippet so I don't see the problem. Just edit the snippet with the needed code.
    – Mark Baijens
    Nov 9 at 14:27















up vote
-2
down vote

favorite












(I added jsfiddle since Stack snippet is down): https://jsfiddle.net/5xopbujL/



I broke my head trying to fix the scrip working. I have the following simple javascript:






$(document).ready(function() 
 showMessage();
 setInterval(function() 
 $(".msg-content").empty();
 showMessage();
 , 7000);
)

:root 
 --msg-content-height: 26.75em;
 --msg-spacing: 1em;
 --msg1-height: 5.5em;
 --msg2-height: 4em;
 --msg3-height: 2.5em;
 --msg4-height: 2.5em;
 --msg5-height: 4em;
 --msg6-height: 3.25em;


.msg-send 
 position: absolute;
 animation-iteration-count: 1;
 animation-duration: 8s;
 animation-fill-mode: forwards;


.msg-receive 
 position: absolute;
 animation-iteration-count: 1;
 animation-duration: 8s;
 background-color: #2d67ff;
 color: #ffffff;
 animation-fill-mode: forwards;


.msg-container 
 width: 28em;


.msg-content 
 height: var(--msg-content-height);



/*Animation Names*/

#msg1 
 animation-name: msg1;


#msg2 
 animation-name: msg2;


#msg3 
 animation-name: msg3;


#msg4 
 animation-name: msg4;


#msg5 
 animation-name: msg5;


#msg6 
 animation-name: msg6;



/*Key Frames*/

@keyframes msg1 
 0% 
 top: calc(var(--msg-content-height) - var(--msg1-height));
 left: -4em;
 transform: scale(0);
 
 5% 
 top: calc(var(--msg-content-height) - var(--msg1-height));
 left: 0;
 transform: scale(1);
 
 12% 
 top: calc(var(--msg-content-height) - var(--msg1-height));
 
 17% 
 top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height));
 
 30% 
 top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height));
 
 35% 
 top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height));
 
 49% 
 top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height));
 
 54% 
 top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
 
 70% 
 top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
 
 75% 
 top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
 
 95% 
 top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
 
 100% 
 top: 0;
 left: 0;
 


@keyframes msg2 
 0% 
 top: calc(var(--msg-content-height) - var(--msg2-height));
 right: 0;
 transform: scale(0);
 opacity: 0;
 
 12% 
 top: calc(var(--msg-content-height) - var(--msg2-height));
 right: -4em;
 transform: scale(0);
 
 17% 
 top: calc(var(--msg-content-height) - var(--msg2-height));
 right: 0;
 transform: scale(1);
 opacity: 1;
 
 30% 
 top: calc(var(--msg-content-height) - var(--msg2-height));
 
 35% 
 top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height));
 
 49% 
 top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height));
 
 54% 
 top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
 
 70% 
 top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
 
 75% 
 top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
 right: 0;
 
 95% 
 top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
 
 100% 
 top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height) - var(--msg-spacing) - var(--msg6-height));
 right: 0;
 


@keyframes msg3 
 0% 
 top: calc(var(--msg-content-height) - var(--msg3-height));
 left: -4em;
 opacity: 0;
 transform: scale(0);
 
 30% 
 top: calc(var(--msg-content-height) - var(--msg3-height));
 opacity: 0;
 transform: scale(0);
 
 35% 
 top: calc(var(--msg-content-height) - var(--msg3-height));
 left: 0;
 transform: scale(1);
 opacity: 1;
 
 49% 
 top: calc(var(--msg-content-height) - var(--msg3-height));
 
 54% 
 top: calc(var(--msg-content-height) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
 
 70% 
 top: calc(var(--msg-content-height) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
 
 75% 
 top: calc(var(--msg-content-height) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
 left: 0;
 
 95% 
 top: calc(var(--msg-content-height) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
 
 100% 
 top: calc(var(--msg-content-height) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height) - var(--msg-spacing) - var(--msg6-height));
 left: 0;
 


@keyframes msg4 
 0% 
 top: calc(var(--msg-content-height) - var(--msg4-height));
 right: -4em;
 opacity: 0;
 transform: scale(0);
 
 49% 
 top: calc(var(--msg-content-height) - var(--msg4-height));
 right: -4em;
 opacity: 0;
 transform: scale(0);
 
 54% 
 top: calc(var(--msg-content-height) - var(--msg4-height));
 right: 0;
 transform: scale(1);
 opacity: 1;
 
 70% 
 top: calc(var(--msg-content-height) - var(--msg4-height));
 
 75% 
 top: calc(var(--msg-content-height) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
 right: 0;
 
 95% 
 top: calc(var(--msg-content-height) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
 
 100% 
 top: calc(var(--msg-content-height) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height) - var(--msg-spacing) - var(--msg6-height));
 right: 0;
 


@keyframes msg5 
 0% 
 top: calc(var(--msg-content-height) - var(--msg5-height));
 left: -4em;
 opacity: 0;
 transform: scale(0);
 
 70% 
 top: calc(var(--msg-content-height) - var(--msg5-height));
 left: -4em;
 opacity: 0;
 transform: scale(0);
 
 75% 
 top: calc(var(--msg-content-height) - var(--msg5-height));
 left: 0;
 transform: scale(1);
 opacity: 1;
 
 95% 
 top: calc(var(--msg-content-height) - var(--msg5-height));
 
 100% 
 top: calc(var(--msg-content-height) - var(--msg5-height) - var(--msg-spacing) - var(--msg6-height));
 left: 0;
 transform: scale(1);
 opacity: 1;
 


@keyframes msg6 
 0% 
 top: calc(var(--msg-content-height) - var(--msg6-height));
 right: -4em;
 opacity: 0;
 transform: scale(0);
 
 95% 
 top: calc(var(--msg-content-height) - var(--msg6-height));
 right: 0;
 opacity: 0;
 transform: scale(0);
 
 100% 
 top: calc(var(--msg-content-height) - var(--msg6-height));
 right: 0em;
 opacity: 1;
 transform: scale(1);
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="msg-container pv4 ph4 br3 center bg-white shadow-6">
 <div class="msg-content w-100 relative">
 <div id="msg1" class="msg-receive dib mb4 bg-message br4 pv2 ph3 white measure-narrow">Message #1</div>
 <div id="msg2" class="msg-send dib mb4 bg-near-white br4 pv2 ph3 mid-gray measure-narrow">Message #2 </div>
 <div id="msg3" class="msg-receive dib mb4 bg-message br4 pv2 ph3 white measure-narrow">Message #3</div>

 </div>
</div>





Everything is almost fine but I can't find a way how to hide the "message" block as soon as it reaches the --msg-content-height . And how to loop the messages? So how to make the messages disappear when they reaches the top and loop them?






javascript jquery html css







share|improve this question



















  • 2




    The stack snippet is not down, you just didn't add the showMessage() function.
    – Mark Baijens
    Nov 9 at 13:39










  • Hello @mark-baijens , Service Unavailable HTTP Error 503. The service is unavailable.
    – Jamdev
    Nov 9 at 13:41







  • 1




    You asked this two hours ago already, stackoverflow.com/questions/53224959/… Please do not create such duplicates! (You could have still added the fiddle to your existing question by editing it.)
    – misorude
    Nov 9 at 13:59






  • 1




    @astonearachnid maybe it would be better to mark that first question as duplicate, because here someone answered...
    – barbsan
    Nov 9 at 14:12










  • @Jamdev, I do not get such error. Also you did seem to be able to provide a snippet so I don't see the problem. Just edit the snippet with the needed code.
    – Mark Baijens
    Nov 9 at 14:27













up vote
-2
down vote

favorite









up vote
-2
down vote

favorite











(I added jsfiddle since Stack snippet is down): https://jsfiddle.net/5xopbujL/



I broke my head trying to fix the scrip working. I have the following simple javascript:






$(document).ready(function() 
 showMessage();
 setInterval(function() 
 $(".msg-content").empty();
 showMessage();
 , 7000);
)

:root 
 --msg-content-height: 26.75em;
 --msg-spacing: 1em;
 --msg1-height: 5.5em;
 --msg2-height: 4em;
 --msg3-height: 2.5em;
 --msg4-height: 2.5em;
 --msg5-height: 4em;
 --msg6-height: 3.25em;


.msg-send 
 position: absolute;
 animation-iteration-count: 1;
 animation-duration: 8s;
 animation-fill-mode: forwards;


.msg-receive 
 position: absolute;
 animation-iteration-count: 1;
 animation-duration: 8s;
 background-color: #2d67ff;
 color: #ffffff;
 animation-fill-mode: forwards;


.msg-container 
 width: 28em;


.msg-content 
 height: var(--msg-content-height);



/*Animation Names*/

#msg1 
 animation-name: msg1;


#msg2 
 animation-name: msg2;


#msg3 
 animation-name: msg3;


#msg4 
 animation-name: msg4;


#msg5 
 animation-name: msg5;


#msg6 
 animation-name: msg6;



/*Key Frames*/

@keyframes msg1 
 0% 
 top: calc(var(--msg-content-height) - var(--msg1-height));
 left: -4em;
 transform: scale(0);
 
 5% 
 top: calc(var(--msg-content-height) - var(--msg1-height));
 left: 0;
 transform: scale(1);
 
 12% 
 top: calc(var(--msg-content-height) - var(--msg1-height));
 
 17% 
 top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height));
 
 30% 
 top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height));
 
 35% 
 top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height));
 
 49% 
 top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height));
 
 54% 
 top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
 
 70% 
 top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
 
 75% 
 top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
 
 95% 
 top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
 
 100% 
 top: 0;
 left: 0;
 


@keyframes msg2 
 0% 
 top: calc(var(--msg-content-height) - var(--msg2-height));
 right: 0;
 transform: scale(0);
 opacity: 0;
 
 12% 
 top: calc(var(--msg-content-height) - var(--msg2-height));
 right: -4em;
 transform: scale(0);
 
 17% 
 top: calc(var(--msg-content-height) - var(--msg2-height));
 right: 0;
 transform: scale(1);
 opacity: 1;
 
 30% 
 top: calc(var(--msg-content-height) - var(--msg2-height));
 
 35% 
 top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height));
 
 49% 
 top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height));
 
 54% 
 top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
 
 70% 
 top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
 
 75% 
 top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
 right: 0;
 
 95% 
 top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
 
 100% 
 top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height) - var(--msg-spacing) - var(--msg6-height));
 right: 0;
 


@keyframes msg3 
 0% 
 top: calc(var(--msg-content-height) - var(--msg3-height));
 left: -4em;
 opacity: 0;
 transform: scale(0);
 
 30% 
 top: calc(var(--msg-content-height) - var(--msg3-height));
 opacity: 0;
 transform: scale(0);
 
 35% 
 top: calc(var(--msg-content-height) - var(--msg3-height));
 left: 0;
 transform: scale(1);
 opacity: 1;
 
 49% 
 top: calc(var(--msg-content-height) - var(--msg3-height));
 
 54% 
 top: calc(var(--msg-content-height) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
 
 70% 
 top: calc(var(--msg-content-height) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
 
 75% 
 top: calc(var(--msg-content-height) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
 left: 0;
 
 95% 
 top: calc(var(--msg-content-height) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
 
 100% 
 top: calc(var(--msg-content-height) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height) - var(--msg-spacing) - var(--msg6-height));
 left: 0;
 


@keyframes msg4 
 0% 
 top: calc(var(--msg-content-height) - var(--msg4-height));
 right: -4em;
 opacity: 0;
 transform: scale(0);
 
 49% 
 top: calc(var(--msg-content-height) - var(--msg4-height));
 right: -4em;
 opacity: 0;
 transform: scale(0);
 
 54% 
 top: calc(var(--msg-content-height) - var(--msg4-height));
 right: 0;
 transform: scale(1);
 opacity: 1;
 
 70% 
 top: calc(var(--msg-content-height) - var(--msg4-height));
 
 75% 
 top: calc(var(--msg-content-height) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
 right: 0;
 
 95% 
 top: calc(var(--msg-content-height) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
 
 100% 
 top: calc(var(--msg-content-height) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height) - var(--msg-spacing) - var(--msg6-height));
 right: 0;
 


@keyframes msg5 
 0% 
 top: calc(var(--msg-content-height) - var(--msg5-height));
 left: -4em;
 opacity: 0;
 transform: scale(0);
 
 70% 
 top: calc(var(--msg-content-height) - var(--msg5-height));
 left: -4em;
 opacity: 0;
 transform: scale(0);
 
 75% 
 top: calc(var(--msg-content-height) - var(--msg5-height));
 left: 0;
 transform: scale(1);
 opacity: 1;
 
 95% 
 top: calc(var(--msg-content-height) - var(--msg5-height));
 
 100% 
 top: calc(var(--msg-content-height) - var(--msg5-height) - var(--msg-spacing) - var(--msg6-height));
 left: 0;
 transform: scale(1);
 opacity: 1;
 


@keyframes msg6 
 0% 
 top: calc(var(--msg-content-height) - var(--msg6-height));
 right: -4em;
 opacity: 0;
 transform: scale(0);
 
 95% 
 top: calc(var(--msg-content-height) - var(--msg6-height));
 right: 0;
 opacity: 0;
 transform: scale(0);
 
 100% 
 top: calc(var(--msg-content-height) - var(--msg6-height));
 right: 0em;
 opacity: 1;
 transform: scale(1);
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="msg-container pv4 ph4 br3 center bg-white shadow-6">
 <div class="msg-content w-100 relative">
 <div id="msg1" class="msg-receive dib mb4 bg-message br4 pv2 ph3 white measure-narrow">Message #1</div>
 <div id="msg2" class="msg-send dib mb4 bg-near-white br4 pv2 ph3 mid-gray measure-narrow">Message #2 </div>
 <div id="msg3" class="msg-receive dib mb4 bg-message br4 pv2 ph3 white measure-narrow">Message #3</div>

 </div>
</div>





Everything is almost fine but I can't find a way how to hide the "message" block as soon as it reaches the --msg-content-height . And how to loop the messages? So how to make the messages disappear when they reaches the top and loop them?






javascript jquery html css







share|improve this question















(I added jsfiddle since Stack snippet is down): https://jsfiddle.net/5xopbujL/



I broke my head trying to fix the scrip working. I have the following simple javascript:






$(document).ready(function() 
 showMessage();
 setInterval(function() 
 $(".msg-content").empty();
 showMessage();
 , 7000);
)

:root 
 --msg-content-height: 26.75em;
 --msg-spacing: 1em;
 --msg1-height: 5.5em;
 --msg2-height: 4em;
 --msg3-height: 2.5em;
 --msg4-height: 2.5em;
 --msg5-height: 4em;
 --msg6-height: 3.25em;


.msg-send 
 position: absolute;
 animation-iteration-count: 1;
 animation-duration: 8s;
 animation-fill-mode: forwards;


.msg-receive 
 position: absolute;
 animation-iteration-count: 1;
 animation-duration: 8s;
 background-color: #2d67ff;
 color: #ffffff;
 animation-fill-mode: forwards;


.msg-container 
 width: 28em;


.msg-content 
 height: var(--msg-content-height);



/*Animation Names*/

#msg1 
 animation-name: msg1;


#msg2 
 animation-name: msg2;


#msg3 
 animation-name: msg3;


#msg4 
 animation-name: msg4;


#msg5 
 animation-name: msg5;


#msg6 
 animation-name: msg6;



/*Key Frames*/

@keyframes msg1 
 0% 
 top: calc(var(--msg-content-height) - var(--msg1-height));
 left: -4em;
 transform: scale(0);
 
 5% 
 top: calc(var(--msg-content-height) - var(--msg1-height));
 left: 0;
 transform: scale(1);
 
 12% 
 top: calc(var(--msg-content-height) - var(--msg1-height));
 
 17% 
 top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height));
 
 30% 
 top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height));
 
 35% 
 top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height));
 
 49% 
 top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height));
 
 54% 
 top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
 
 70% 
 top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
 
 75% 
 top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
 
 95% 
 top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
 
 100% 
 top: 0;
 left: 0;
 


@keyframes msg2 
 0% 
 top: calc(var(--msg-content-height) - var(--msg2-height));
 right: 0;
 transform: scale(0);
 opacity: 0;
 
 12% 
 top: calc(var(--msg-content-height) - var(--msg2-height));
 right: -4em;
 transform: scale(0);
 
 17% 
 top: calc(var(--msg-content-height) - var(--msg2-height));
 right: 0;
 transform: scale(1);
 opacity: 1;
 
 30% 
 top: calc(var(--msg-content-height) - var(--msg2-height));
 
 35% 
 top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height));
 
 49% 
 top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height));
 
 54% 
 top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
 
 70% 
 top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
 
 75% 
 top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
 right: 0;
 
 95% 
 top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
 
 100% 
 top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height) - var(--msg-spacing) - var(--msg6-height));
 right: 0;
 


@keyframes msg3 
 0% 
 top: calc(var(--msg-content-height) - var(--msg3-height));
 left: -4em;
 opacity: 0;
 transform: scale(0);
 
 30% 
 top: calc(var(--msg-content-height) - var(--msg3-height));
 opacity: 0;
 transform: scale(0);
 
 35% 
 top: calc(var(--msg-content-height) - var(--msg3-height));
 left: 0;
 transform: scale(1);
 opacity: 1;
 
 49% 
 top: calc(var(--msg-content-height) - var(--msg3-height));
 
 54% 
 top: calc(var(--msg-content-height) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
 
 70% 
 top: calc(var(--msg-content-height) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
 
 75% 
 top: calc(var(--msg-content-height) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
 left: 0;
 
 95% 
 top: calc(var(--msg-content-height) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
 
 100% 
 top: calc(var(--msg-content-height) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height) - var(--msg-spacing) - var(--msg6-height));
 left: 0;
 


@keyframes msg4 
 0% 
 top: calc(var(--msg-content-height) - var(--msg4-height));
 right: -4em;
 opacity: 0;
 transform: scale(0);
 
 49% 
 top: calc(var(--msg-content-height) - var(--msg4-height));
 right: -4em;
 opacity: 0;
 transform: scale(0);
 
 54% 
 top: calc(var(--msg-content-height) - var(--msg4-height));
 right: 0;
 transform: scale(1);
 opacity: 1;
 
 70% 
 top: calc(var(--msg-content-height) - var(--msg4-height));
 
 75% 
 top: calc(var(--msg-content-height) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
 right: 0;
 
 95% 
 top: calc(var(--msg-content-height) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
 
 100% 
 top: calc(var(--msg-content-height) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height) - var(--msg-spacing) - var(--msg6-height));
 right: 0;
 


@keyframes msg5 
 0% 
 top: calc(var(--msg-content-height) - var(--msg5-height));
 left: -4em;
 opacity: 0;
 transform: scale(0);
 
 70% 
 top: calc(var(--msg-content-height) - var(--msg5-height));
 left: -4em;
 opacity: 0;
 transform: scale(0);
 
 75% 
 top: calc(var(--msg-content-height) - var(--msg5-height));
 left: 0;
 transform: scale(1);
 opacity: 1;
 
 95% 
 top: calc(var(--msg-content-height) - var(--msg5-height));
 
 100% 
 top: calc(var(--msg-content-height) - var(--msg5-height) - var(--msg-spacing) - var(--msg6-height));
 left: 0;
 transform: scale(1);
 opacity: 1;
 


@keyframes msg6 
 0% 
 top: calc(var(--msg-content-height) - var(--msg6-height));
 right: -4em;
 opacity: 0;
 transform: scale(0);
 
 95% 
 top: calc(var(--msg-content-height) - var(--msg6-height));
 right: 0;
 opacity: 0;
 transform: scale(0);
 
 100% 
 top: calc(var(--msg-content-height) - var(--msg6-height));
 right: 0em;
 opacity: 1;
 transform: scale(1);
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="msg-container pv4 ph4 br3 center bg-white shadow-6">
 <div class="msg-content w-100 relative">
 <div id="msg1" class="msg-receive dib mb4 bg-message br4 pv2 ph3 white measure-narrow">Message #1</div>
 <div id="msg2" class="msg-send dib mb4 bg-near-white br4 pv2 ph3 mid-gray measure-narrow">Message #2 </div>
 <div id="msg3" class="msg-receive dib mb4 bg-message br4 pv2 ph3 white measure-narrow">Message #3</div>

 </div>
</div>





Everything is almost fine but I can't find a way how to hide the "message" block as soon as it reaches the --msg-content-height . And how to loop the messages? So how to make the messages disappear when they reaches the top and loop them?






$(document).ready(function() 
 showMessage();
 setInterval(function() 
 $(".msg-content").empty();
 showMessage();
 , 7000);
)

:root 
 --msg-content-height: 26.75em;
 --msg-spacing: 1em;
 --msg1-height: 5.5em;
 --msg2-height: 4em;
 --msg3-height: 2.5em;
 --msg4-height: 2.5em;
 --msg5-height: 4em;
 --msg6-height: 3.25em;


.msg-send 
 position: absolute;
 animation-iteration-count: 1;
 animation-duration: 8s;
 animation-fill-mode: forwards;


.msg-receive 
 position: absolute;
 animation-iteration-count: 1;
 animation-duration: 8s;
 background-color: #2d67ff;
 color: #ffffff;
 animation-fill-mode: forwards;


.msg-container 
 width: 28em;


.msg-content 
 height: var(--msg-content-height);



/*Animation Names*/

#msg1 
 animation-name: msg1;


#msg2 
 animation-name: msg2;


#msg3 
 animation-name: msg3;


#msg4 
 animation-name: msg4;


#msg5 
 animation-name: msg5;


#msg6 
 animation-name: msg6;



/*Key Frames*/

@keyframes msg1 
 0% 
 top: calc(var(--msg-content-height) - var(--msg1-height));
 left: -4em;
 transform: scale(0);
 
 5% 
 top: calc(var(--msg-content-height) - var(--msg1-height));
 left: 0;
 transform: scale(1);
 
 12% 
 top: calc(var(--msg-content-height) - var(--msg1-height));
 
 17% 
 top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height));
 
 30% 
 top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height));
 
 35% 
 top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height));
 
 49% 
 top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height));
 
 54% 
 top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
 
 70% 
 top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
 
 75% 
 top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
 
 95% 
 top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
 
 100% 
 top: 0;
 left: 0;
 


@keyframes msg2 
 0% 
 top: calc(var(--msg-content-height) - var(--msg2-height));
 right: 0;
 transform: scale(0);
 opacity: 0;
 
 12% 
 top: calc(var(--msg-content-height) - var(--msg2-height));
 right: -4em;
 transform: scale(0);
 
 17% 
 top: calc(var(--msg-content-height) - var(--msg2-height));
 right: 0;
 transform: scale(1);
 opacity: 1;
 
 30% 
 top: calc(var(--msg-content-height) - var(--msg2-height));
 
 35% 
 top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height));
 
 49% 
 top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height));
 
 54% 
 top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
 
 70% 
 top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
 
 75% 
 top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
 right: 0;
 
 95% 
 top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
 
 100% 
 top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height) - var(--msg-spacing) - var(--msg6-height));
 right: 0;
 


@keyframes msg3 
 0% 
 top: calc(var(--msg-content-height) - var(--msg3-height));
 left: -4em;
 opacity: 0;
 transform: scale(0);
 
 30% 
 top: calc(var(--msg-content-height) - var(--msg3-height));
 opacity: 0;
 transform: scale(0);
 
 35% 
 top: calc(var(--msg-content-height) - var(--msg3-height));
 left: 0;
 transform: scale(1);
 opacity: 1;
 
 49% 
 top: calc(var(--msg-content-height) - var(--msg3-height));
 
 54% 
 top: calc(var(--msg-content-height) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
 
 70% 
 top: calc(var(--msg-content-height) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
 
 75% 
 top: calc(var(--msg-content-height) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
 left: 0;
 
 95% 
 top: calc(var(--msg-content-height) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
 
 100% 
 top: calc(var(--msg-content-height) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height) - var(--msg-spacing) - var(--msg6-height));
 left: 0;
 


@keyframes msg4 
 0% 
 top: calc(var(--msg-content-height) - var(--msg4-height));
 right: -4em;
 opacity: 0;
 transform: scale(0);
 
 49% 
 top: calc(var(--msg-content-height) - var(--msg4-height));
 right: -4em;
 opacity: 0;
 transform: scale(0);
 
 54% 
 top: calc(var(--msg-content-height) - var(--msg4-height));
 right: 0;
 transform: scale(1);
 opacity: 1;
 
 70% 
 top: calc(var(--msg-content-height) - var(--msg4-height));
 
 75% 
 top: calc(var(--msg-content-height) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
 right: 0;
 
 95% 
 top: calc(var(--msg-content-height) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
 
 100% 
 top: calc(var(--msg-content-height) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height) - var(--msg-spacing) - var(--msg6-height));
 right: 0;
 


@keyframes msg5 
 0% 
 top: calc(var(--msg-content-height) - var(--msg5-height));
 left: -4em;
 opacity: 0;
 transform: scale(0);
 
 70% 
 top: calc(var(--msg-content-height) - var(--msg5-height));
 left: -4em;
 opacity: 0;
 transform: scale(0);
 
 75% 
 top: calc(var(--msg-content-height) - var(--msg5-height));
 left: 0;
 transform: scale(1);
 opacity: 1;
 
 95% 
 top: calc(var(--msg-content-height) - var(--msg5-height));
 
 100% 
 top: calc(var(--msg-content-height) - var(--msg5-height) - var(--msg-spacing) - var(--msg6-height));
 left: 0;
 transform: scale(1);
 opacity: 1;
 


@keyframes msg6 
 0% 
 top: calc(var(--msg-content-height) - var(--msg6-height));
 right: -4em;
 opacity: 0;
 transform: scale(0);
 
 95% 
 top: calc(var(--msg-content-height) - var(--msg6-height));
 right: 0;
 opacity: 0;
 transform: scale(0);
 
 100% 
 top: calc(var(--msg-content-height) - var(--msg6-height));
 right: 0em;
 opacity: 1;
 transform: scale(1);
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="msg-container pv4 ph4 br3 center bg-white shadow-6">
 <div class="msg-content w-100 relative">
 <div id="msg1" class="msg-receive dib mb4 bg-message br4 pv2 ph3 white measure-narrow">Message #1</div>
 <div id="msg2" class="msg-send dib mb4 bg-near-white br4 pv2 ph3 mid-gray measure-narrow">Message #2 </div>
 <div id="msg3" class="msg-receive dib mb4 bg-message br4 pv2 ph3 white measure-narrow">Message #3</div>

 </div>
</div>





$(document).ready(function() 
 showMessage();
 setInterval(function() 
 $(".msg-content").empty();
 showMessage();
 , 7000);
)

:root 
 --msg-content-height: 26.75em;
 --msg-spacing: 1em;
 --msg1-height: 5.5em;
 --msg2-height: 4em;
 --msg3-height: 2.5em;
 --msg4-height: 2.5em;
 --msg5-height: 4em;
 --msg6-height: 3.25em;


.msg-send 
 position: absolute;
 animation-iteration-count: 1;
 animation-duration: 8s;
 animation-fill-mode: forwards;


.msg-receive 
 position: absolute;
 animation-iteration-count: 1;
 animation-duration: 8s;
 background-color: #2d67ff;
 color: #ffffff;
 animation-fill-mode: forwards;


.msg-container 
 width: 28em;


.msg-content 
 height: var(--msg-content-height);



/*Animation Names*/

#msg1 
 animation-name: msg1;


#msg2 
 animation-name: msg2;


#msg3 
 animation-name: msg3;


#msg4 
 animation-name: msg4;


#msg5 
 animation-name: msg5;


#msg6 
 animation-name: msg6;



/*Key Frames*/

@keyframes msg1 
 0% 
 top: calc(var(--msg-content-height) - var(--msg1-height));
 left: -4em;
 transform: scale(0);
 
 5% 
 top: calc(var(--msg-content-height) - var(--msg1-height));
 left: 0;
 transform: scale(1);
 
 12% 
 top: calc(var(--msg-content-height) - var(--msg1-height));
 
 17% 
 top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height));
 
 30% 
 top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height));
 
 35% 
 top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height));
 
 49% 
 top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height));
 
 54% 
 top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
 
 70% 
 top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
 
 75% 
 top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
 
 95% 
 top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
 
 100% 
 top: 0;
 left: 0;
 


@keyframes msg2 
 0% 
 top: calc(var(--msg-content-height) - var(--msg2-height));
 right: 0;
 transform: scale(0);
 opacity: 0;
 
 12% 
 top: calc(var(--msg-content-height) - var(--msg2-height));
 right: -4em;
 transform: scale(0);
 
 17% 
 top: calc(var(--msg-content-height) - var(--msg2-height));
 right: 0;
 transform: scale(1);
 opacity: 1;
 
 30% 
 top: calc(var(--msg-content-height) - var(--msg2-height));
 
 35% 
 top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height));
 
 49% 
 top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height));
 
 54% 
 top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
 
 70% 
 top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
 
 75% 
 top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
 right: 0;
 
 95% 
 top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
 
 100% 
 top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height) - var(--msg-spacing) - var(--msg6-height));
 right: 0;
 


@keyframes msg3 
 0% 
 top: calc(var(--msg-content-height) - var(--msg3-height));
 left: -4em;
 opacity: 0;
 transform: scale(0);
 
 30% 
 top: calc(var(--msg-content-height) - var(--msg3-height));
 opacity: 0;
 transform: scale(0);
 
 35% 
 top: calc(var(--msg-content-height) - var(--msg3-height));
 left: 0;
 transform: scale(1);
 opacity: 1;
 
 49% 
 top: calc(var(--msg-content-height) - var(--msg3-height));
 
 54% 
 top: calc(var(--msg-content-height) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
 
 70% 
 top: calc(var(--msg-content-height) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
 
 75% 
 top: calc(var(--msg-content-height) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
 left: 0;
 
 95% 
 top: calc(var(--msg-content-height) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
 
 100% 
 top: calc(var(--msg-content-height) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height) - var(--msg-spacing) - var(--msg6-height));
 left: 0;
 


@keyframes msg4 
 0% 
 top: calc(var(--msg-content-height) - var(--msg4-height));
 right: -4em;
 opacity: 0;
 transform: scale(0);
 
 49% 
 top: calc(var(--msg-content-height) - var(--msg4-height));
 right: -4em;
 opacity: 0;
 transform: scale(0);
 
 54% 
 top: calc(var(--msg-content-height) - var(--msg4-height));
 right: 0;
 transform: scale(1);
 opacity: 1;
 
 70% 
 top: calc(var(--msg-content-height) - var(--msg4-height));
 
 75% 
 top: calc(var(--msg-content-height) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
 right: 0;
 
 95% 
 top: calc(var(--msg-content-height) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
 
 100% 
 top: calc(var(--msg-content-height) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height) - var(--msg-spacing) - var(--msg6-height));
 right: 0;
 


@keyframes msg5 
 0% 
 top: calc(var(--msg-content-height) - var(--msg5-height));
 left: -4em;
 opacity: 0;
 transform: scale(0);
 
 70% 
 top: calc(var(--msg-content-height) - var(--msg5-height));
 left: -4em;
 opacity: 0;
 transform: scale(0);
 
 75% 
 top: calc(var(--msg-content-height) - var(--msg5-height));
 left: 0;
 transform: scale(1);
 opacity: 1;
 
 95% 
 top: calc(var(--msg-content-height) - var(--msg5-height));
 
 100% 
 top: calc(var(--msg-content-height) - var(--msg5-height) - var(--msg-spacing) - var(--msg6-height));
 left: 0;
 transform: scale(1);
 opacity: 1;
 


@keyframes msg6 
 0% 
 top: calc(var(--msg-content-height) - var(--msg6-height));
 right: -4em;
 opacity: 0;
 transform: scale(0);
 
 95% 
 top: calc(var(--msg-content-height) - var(--msg6-height));
 right: 0;
 opacity: 0;
 transform: scale(0);
 
 100% 
 top: calc(var(--msg-content-height) - var(--msg6-height));
 right: 0em;
 opacity: 1;
 transform: scale(1);
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="msg-container pv4 ph4 br3 center bg-white shadow-6">
 <div class="msg-content w-100 relative">
 <div id="msg1" class="msg-receive dib mb4 bg-message br4 pv2 ph3 white measure-narrow">Message #1</div>
 <div id="msg2" class="msg-send dib mb4 bg-near-white br4 pv2 ph3 mid-gray measure-narrow">Message #2 </div>
 <div id="msg3" class="msg-receive dib mb4 bg-message br4 pv2 ph3 white measure-narrow">Message #3</div>

 </div>
</div>





javascript jquery html css




javascript jquery html css






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 9 at 14:28









Mark Baijens

6,27693152




6,27693152










asked Nov 9 at 13:36









Jamdev

287112




287112







  • 2




    The stack snippet is not down, you just didn't add the showMessage() function.
    – Mark Baijens
    Nov 9 at 13:39










  • Hello @mark-baijens , Service Unavailable HTTP Error 503. The service is unavailable.
    – Jamdev
    Nov 9 at 13:41







  • 1




    You asked this two hours ago already, stackoverflow.com/questions/53224959/… Please do not create such duplicates! (You could have still added the fiddle to your existing question by editing it.)
    – misorude
    Nov 9 at 13:59






  • 1




    @astonearachnid maybe it would be better to mark that first question as duplicate, because here someone answered...
    – barbsan
    Nov 9 at 14:12










  • @Jamdev, I do not get such error. Also you did seem to be able to provide a snippet so I don't see the problem. Just edit the snippet with the needed code.
    – Mark Baijens
    Nov 9 at 14:27













  • 2




    The stack snippet is not down, you just didn't add the showMessage() function.
    – Mark Baijens
    Nov 9 at 13:39










  • Hello @mark-baijens , Service Unavailable HTTP Error 503. The service is unavailable.
    – Jamdev
    Nov 9 at 13:41







  • 1




    You asked this two hours ago already, stackoverflow.com/questions/53224959/… Please do not create such duplicates! (You could have still added the fiddle to your existing question by editing it.)
    – misorude
    Nov 9 at 13:59






  • 1




    @astonearachnid maybe it would be better to mark that first question as duplicate, because here someone answered...
    – barbsan
    Nov 9 at 14:12










  • @Jamdev, I do not get such error. Also you did seem to be able to provide a snippet so I don't see the problem. Just edit the snippet with the needed code.
    – Mark Baijens
    Nov 9 at 14:27








2




2




The stack snippet is not down, you just didn't add the showMessage() function.
– Mark Baijens
Nov 9 at 13:39




The stack snippet is not down, you just didn't add the showMessage() function.
– Mark Baijens
Nov 9 at 13:39












Hello @mark-baijens , Service Unavailable HTTP Error 503. The service is unavailable.
– Jamdev
Nov 9 at 13:41





Hello @mark-baijens , Service Unavailable HTTP Error 503. The service is unavailable.
– Jamdev
Nov 9 at 13:41





1




1




You asked this two hours ago already, stackoverflow.com/questions/53224959/… Please do not create such duplicates! (You could have still added the fiddle to your existing question by editing it.)
– misorude
Nov 9 at 13:59




You asked this two hours ago already, stackoverflow.com/questions/53224959/… Please do not create such duplicates! (You could have still added the fiddle to your existing question by editing it.)
– misorude
Nov 9 at 13:59




1




1




@astonearachnid maybe it would be better to mark that first question as duplicate, because here someone answered...
– barbsan
Nov 9 at 14:12




@astonearachnid maybe it would be better to mark that first question as duplicate, because here someone answered...
– barbsan
Nov 9 at 14:12












@Jamdev, I do not get such error. Also you did seem to be able to provide a snippet so I don't see the problem. Just edit the snippet with the needed code.
– Mark Baijens
Nov 9 at 14:27





@Jamdev, I do not get such error. Also you did seem to be able to provide a snippet so I don't see the problem. Just edit the snippet with the needed code.
– Mark Baijens
Nov 9 at 14:27













1 Answer
1






active

oldest

votes

















up vote
0
down vote













If you listen for each message when the animation has ended, you can remove it. It's useful however for demo purposes, to include a delay for consecutive messages.
You may have to adjust the percentages of the keyframes.






$('#msg1, #msg2, #msg3').on('animationend', function () 
 $(this).remove();
);

#msg1 
 animation-name: msg1;


#msg2 
 animation-name: msg2;
 animation-delay: 1s;


#msg3 
 animation-name: msg3;
 animation-delay: 2s;








share|improve this answer






















    Your Answer






    StackExchange.ifUsing("editor", function ()
    StackExchange.using("externalEditor", function ()
    StackExchange.using("snippets", function ()
    StackExchange.snippets.init();
    );
    );
    , "code-snippets");

    StackExchange.ready(function()
    var channelOptions =
    tags: "".split(" "),
    id: "1"
    ;
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function()
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled)
    StackExchange.using("snippets", function()
    createEditor();
    );

    else
    createEditor();

    );

    function createEditor()
    StackExchange.prepareEditor(
    heartbeatType: 'answer',
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader:
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    ,
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    );



    );













     

    draft saved


    draft discarded


















    StackExchange.ready(
    function ()
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53226756%2floop-the-script%23new-answer', 'question_page');

    );

    Post as a guest

















    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes








    up vote
    0
    down vote













    If you listen for each message when the animation has ended, you can remove it. It's useful however for demo purposes, to include a delay for consecutive messages.
    You may have to adjust the percentages of the keyframes.






    $('#msg1, #msg2, #msg3').on('animationend', function () 
     $(this).remove();
    );

    #msg1 
     animation-name: msg1;


    #msg2 
     animation-name: msg2;
     animation-delay: 1s;


    #msg3 
     animation-name: msg3;
     animation-delay: 2s;








    share|improve this answer


























      up vote
      0
      down vote













      If you listen for each message when the animation has ended, you can remove it. It's useful however for demo purposes, to include a delay for consecutive messages.
      You may have to adjust the percentages of the keyframes.






      $('#msg1, #msg2, #msg3').on('animationend', function () 
       $(this).remove();
      );

      #msg1 
       animation-name: msg1;


      #msg2 
       animation-name: msg2;
       animation-delay: 1s;


      #msg3 
       animation-name: msg3;
       animation-delay: 2s;








      share|improve this answer
























        up vote
        0
        down vote










        up vote
        0
        down vote









        If you listen for each message when the animation has ended, you can remove it. It's useful however for demo purposes, to include a delay for consecutive messages.
        You may have to adjust the percentages of the keyframes.






        $('#msg1, #msg2, #msg3').on('animationend', function () 
         $(this).remove();
        );

        #msg1 
         animation-name: msg1;


        #msg2 
         animation-name: msg2;
         animation-delay: 1s;


        #msg3 
         animation-name: msg3;
         animation-delay: 2s;








        share|improve this answer














        If you listen for each message when the animation has ended, you can remove it. It's useful however for demo purposes, to include a delay for consecutive messages.
        You may have to adjust the percentages of the keyframes.






        $('#msg1, #msg2, #msg3').on('animationend', function () 
         $(this).remove();
        );

        #msg1 
         animation-name: msg1;


        #msg2 
         animation-name: msg2;
         animation-delay: 1s;


        #msg3 
         animation-name: msg3;
         animation-delay: 2s;








        $('#msg1, #msg2, #msg3').on('animationend', function () 
         $(this).remove();
        );

        #msg1 
         animation-name: msg1;


        #msg2 
         animation-name: msg2;
         animation-delay: 1s;


        #msg3 
         animation-name: msg3;
         animation-delay: 2s;





        $('#msg1, #msg2, #msg3').on('animationend', function () 
         $(this).remove();
        );

        #msg1 
         animation-name: msg1;


        #msg2 
         animation-name: msg2;
         animation-delay: 1s;


        #msg3 
         animation-name: msg3;
         animation-delay: 2s;






        share|improve this answer














        share|improve this answer



        share|improve this answer








        edited Nov 9 at 14:13

























        answered Nov 9 at 14:07









        Gerard

        10.9k41737




        10.9k41737



























             

            draft saved


            draft discarded















































             


            draft saved


            draft discarded














            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53226756%2floop-the-script%23new-answer', 'question_page');

            );

            Post as a guest

































































            -

            Popular posts from this blog

            Use pre created SQLite database for Android project in kotlin

            Image
            0 I am trying to use an already existing sqLite database in my android app. I have verified that it is loaded into the project in the assets folder and I can browse it in DB browser when I open it directly from the project. This is the schema for the table I am trying to query CREATE TABLE "ACTIVITY_LIST_TBL" ( `_ID` INTEGER NOT NULL, `ACT_NAME` VARCHAR NOT NULL, `ACT_CODE` VARCHAR, `IS_ACTIVE` INTEGER DEFAULT -1, PRIMARY KEY(`_ID`) ) Below is the activity that creates the sqlite helper and then on a button click I execute a query on the ACTIVITY_LIST_TBL. When the query is executed this exception is thrown: android.database.sqlite.SQLiteException: no such table: ACTIVITY_LIST_TBL (code 1 SQLITE_ERROR): , while compiling: SELECT * FROM ACTIVITY_LIST_TBL class CalendarActivity : AppCompatActivity() { private var cursor:Cursor? = null override fun onCreate(savedInstanceState:Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.calendar_activity...
            Read more

            Darth Vader #20

            Image
            Wiki Characters Creators Teams Volumes Issues Publishers Locations Concepts Things Story Arcs Movies Series Episodes New Comics Forums Gen. Discussion Bug Reporting Delete/Combine Pages Artist Show-Off Off-Topic Contests Battles Fan-Fic RPG Comic Book Preview API Developers Editing & Tools Podcast Quests Community Top Users Activity Feed User Lists Community Promos Archives News Reviews Videos Podcasts Previews Login / Sign Up All Wiki     Arcs     Characters     Companies     Concepts     Issues     Locations     Movies     People     Teams     Things     Volumes     Series     Episodes Editorial     Videos     Articles     Reviews     Features ...
            Read more

            Ondo

            Image
            Der Titel dieses Artikels ist mehrdeutig. Zu weiteren Bedeutungen siehe Ondo (Begriffsklärung). Ondo Basisdaten Hauptstadt: Akure gegründet: 3. Februar 1976 Gouverneur: Rotimi Akeredolu ISO 3166-2: NG-ON Fläche Fläche: 15.500 km² Rang in Nigeria: 25 Bevölkerung Einwohner: 4.671.700 (2016) Bevölkerungsdichte: 320 Einw./km² (2016) Rang in Nigeria: 18 Lage von Ondo in Nigeria Ondo ist ein Bundesstaat des westafrikanischen Landes Nigeria mit der Hauptstadt Akure, die mit 420.623 Einwohnern (2005) auch die größte Stadt des Bundesstaates ist. Inhaltsverzeichnis 1 Geografie 2 Geschichte 2.1 Liste der Gouverneure und Administratoren 3 Verwaltung 4 Wirtschaft Geografie | Der Bundesstaat liegt im Südwesten des Landes und grenzt im Norden an den Bundesstaat Ekiti, im Nordwesten an den Bundesstaat Osun, im Nordosten an den Bundesstaat Kogi, im Süden an den Atlantik, im Südosten an den Bundesstaat Delta, im Westen an den Bundess...
            Read more