h1 always be
.message
.word1 closing
.word2 coding
.word3 creating
View Compiled
@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
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.