state transitions

dabblet.css

/* state transitions */

/* setup */
body { font:16px Proxima Nova }
#dialog { background:#BBDD49; box-shadow:0 0 15px rgba(0,0,0,.4);
  background:linear-gradient(top, #D2EE59, #85B524);
  border:3px solid #FFF; border-radius:10px;
  position:fixed; display:block; left:50%; top:50%;
  margin:-183px auto 0 -266px; padding:15px 20px 20px; width:486px }
  
  #dialog .message { background:#F4F4F4; box-shadow:0 0 3px rgba(0, 0, 0, 0.3) inset;
    margin:1em 0; border-radius:4px; box-sizing:border-box; overflow:hidden;
    padding:1em }
    
/* transitions */
@keyframes showing { from { height:0; padding:0; opacity:0 }}
@keyframes hiding { to { padding:0; height:0; opacity:0 }}

.message:first-child { animation:showing 1s 3s alternate infinite }
.message:last-child { animation:hiding 1s 3s alternate infinite }

dabblet.html

<section id=dialog>
  <header class=message>This is one message. It tells you things.</header>
  <header class=message>This is another message. It tells you something else.</header>
</section>

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}