h1 always be
  .message 
    .word1 closing
    .word2 coding
    .word3 creating

@import url('https://fonts.googleapis.com/css?family=Pacifico')
@import url('https://fonts.googleapis.com/css?family=Permanent+Marker')
@import url('https://fonts.googleapis.com/css?family=Abril\+Fatface')
  
*
  box-sizing border-box
  
body
  background-image radial-gradient(#fff 25%, #bbb 75%)
  display flex
  align-items center
  justify-content center
  height 100vh
  width 100vw
  
h1
  color #333
  font-family source sans pro
  font-size 3rem
  font-weight 100
  line-height 1.5
  text-transform uppercase
  white-space nowrap
  overflow hidden
  position relative
  width 500px
  
.message
  background-color #fc0
  color #333
  display block
  font-weight 900
  overflow hidden
  position absolute
  padding-left .5rem
  top .2rem
  left 220px
  animation openclose 5s ease-in-out infinite
  
.word1
  font-family Abril Fatface
  
.word2
  font-family source code pro
  
.word3
  font-family Permanent Marker
    
@keyframes openclose
  // First word animation
  0%
    top .2rem
    width 0
  5%
    width 0
  15%
    width 230px  
  30%
    top .2rem
    width 230px
    
  // Second word animation 
  33%
    top .2rem
    width 0
  38%
    top -4.5rem
    width 0
  48%
    width 190px  
  62%
    top -4.5rem
    width 190px
  
  // Third word animation
  66%
    top -4.5rem
    width 0
    text-indent 0
  71%
    top -9rem
    width 0
    text-indent 5px
  86%
    width 285px  
  98%
    top -9rem
    width 285px
  99%
    text-indent 5px
    top -9rem
    width 0
  100%
    text-indent 0
    top 0
    width 0