<blockquote>
 <p>
  <span data-duration="1.1" data-delay=".23" data-blur="6">“Two&nbsp;</span>
  <span data-duration="1.4" data-delay=".43" data-blur="3">things&nbsp;</span>
  <span data-duration="1.8" data-delay=".42" data-blur="5">are&nbsp;</span>
  <span data-duration="1.2" data-delay=".25" data-blur="9">infinite:&nbsp;</span>
  <span data-duration="1.7" data-delay=".30" data-blur="4">the&nbsp;</span>
  <span data-duration="1.2" data-delay=".29" data-blur="3">universe&nbsp;</span>
  <span data-duration="1.4" data-delay=".26" data-blur="5">and&nbsp;</span>
  <span data-duration="1.7" data-delay=".19" data-blur="9">human&nbsp;</span>
  <span data-duration="1.2" data-delay=".11" data-blur="5">stupidity;&nbsp;</span>
  <span data-duration="1.9" data-delay=".19" data-blur="2" >and&nbsp;</span>
  <span data-duration="1.2" data-delay=".36" data-blur="9" >I'm&nbsp;</span>
  <span data-duration="1.8" data-delay=".17" data-blur="3" >not&nbsp;</span>
  <span data-duration="1.2" data-delay=".30" data-blur="10" >sure&nbsp;</span>
  <span data-duration="1.5" data-delay=".50" data-blur="4" >about&nbsp;</span>
  <span data-duration="1.8" data-delay=".19" data-blur="2" >the&nbsp;</span>
  <span data-duration="1.3" data-delay=".18" data-blur="4" >universe.”&nbsp;</span>
 </p>
 <cite>Albert Einstein</cite>
</blockquote>

*
  margin: 0
  box-sizing: border-box
  
html,
body
  height: 100%

body
  background-color: black
  
  display: flex
  flex-direction: row
  justify-content: center
  align-items: center
  padding: 1rem

blockquote
  display: block
  margin: 0 auto
  text-align: center
  max-width: 900px
  
p,
cite
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
p
  font-family: Georgia
  color: white
  font-size: 2.7rem
  font-style: italic
  font-weight: 300  
  padding-bottom: 2rem
 
span
  will-change: opacity
  opacity: 0
  &.animate
    opacity: 1
    -webkit-filter: blur(0) !important
   
cite
  font-family: verdana
  font-size: .9rem
  color: #aaa
  opacity: 0
  
  font-style: normal
  font-weight: 500
  
  &.animate
    opacity: 1

const words = document.getElementsByTagName('span')
const cite = document.getElementsByTagName('cite')

const animate = () => {
  let maxDelay = 0
  let maxDuration = 0

  for (let i = 0; i < words.length; i++) {
    const word = words[i]
    const duration = (word.dataset.duration)
    const delay = (word.dataset.delay)
    const blur = word.dataset.blur

    maxDelay = Math.max(delay, maxDelay)
    maxDuration = Math.max(duration, maxDuration)
    
    TweenLite.set(word, {
      'webkitFilter': `blur(${blur}px)`
    })
    TweenLite.set(word, {
      className:"+=animate",
      transition: `all ${duration}s ease-in ${delay}s`
    })
  }
  
  TweenLite.set(cite, {
    className:"+=animate",
    transition: `all ${maxDuration}s ease-in ${maxDelay}s`
  })
  
  TweenLite.delayedCall((maxDuration + maxDelay), () => {
    const baseDelay = 3
    TweenLite.set(words, { className:"-=animate", delay: baseDelay });
    TweenLite.set(cite, { className:"-=animate", delay: (baseDelay) });
    TweenLite.delayedCall((baseDelay + (maxDuration*2)), animate)
  })
}

animate()