<p id="weirdtext">Take every letter in its own span(likely done with JS), from there, I would assign them classes with the font size animation.</p>

<author>/u/Frypant</author>

/* https://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain)*/a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
*{box-sizing: border-box; margin: 0; padding: 0;}

/*Above is my default quick CSS reset I always use, doesn't really matter for this example though, you can delete it.*/



body{
  background-color: ghostwhite;
  font-family: sans-serif;
  font-size: 33px;
  line-height: 40px;
  letter-spacing: 2px;
  padding: 50px;
  color: #444;
}


/*Center the weird text*/
#weirdtext{
  max-width: 500px;
  display: block;
  margin: 100px auto 20px auto;
}

/*Just the CSS for the quote citation*/
author{
  max-width: 500px;
  display: block;
  margin: 0 auto;
  text-align: right;
  opacity: .4;
}

/*all spans have to be block or inline block to transform*/
#weirdtext span{
  display: inline-block;
}

/*When JS finds a space, it replaces it with a span with .space class*/
/*I did this so you can do stuff with the spaces if you want.*/
.space{
  width: 15px;
}


/*These classes are added to each letter/span using JS so they animate*/
.effect1{
  animation: zoom 6s linear infinite;
  -webkit-animation: zoom 6s linear infinite;
}
.effect2{
  animation: bounce 3s linear infinite;
  -webkit-animation: bounce 3s linear infinite;
}
.effect3{
  animation: squash 2s linear infinite;
  -webkit-animation: squash 2s linear infinite; 
}
.effect4{
  animation: rot 5s linear infinite;
  -webkit-animation: rot 5s linear infinite;
}
.effect5{
  animation: fade2 4s linear infinite;
  -webkit-animation: fade2 4s linear infinite;
}




/*Here's a bunch of animations*/

@keyframes zoom{
  0%{transform: scale(1);}
  50%{transform: scale(1.1);}
  100%{transform: scale(1);}
}
@-webkit-keyframes zoom{
  0%{-webkit-transform: scale(1);}
  50%{-webkit-transform: scale(1.1);}
  100%{-webkit-transform: scale(1);}
}

@keyframes bounce{
  0%{transform: translateY(0px);}
  50%{transform: translateY(1px);}
  100%{transform: translateY(0px);}
}
@-webkit-keyframes bounce{
  0%{-webkit-transform: translateY(0px);}
  50%{-webkit-transform: translateY(1px);}
  100%{-webkit-transform: translateY(0px);}
}

@keyframes squash{
  0%{transform:scale(1,1);}
  50%{transform:scale(1,1.2);}
  100%{transform:scale(1,1);}
}
@-webkit-keyframes squash{
  0%{-webkit-transform:scale(1,1);}
  50%{-webkit-transform:scale(1,1.2);}
  100%{-webkit-transform:scale(1,1);}
}

@keyframes rot{
  0%{transform: rotate(9deg);}
  50%{transform: rotate(-9deg);}
  100%{transform: rotate(9deg);}
}
@-webkit-keyframes rot{
  0%{-webkit-transform: rotate(9deg);}
  50%{-webkit-transform: rotate(-9deg);}
  100%{-webkit-transform: rotate(9deg);}
}

@keyframes fade2{
  0%{
    transform: scale(.8);
    opacity: .7;
  }
  50%{
    transform: scale(1);
    opacity: 1;
  }
  100%{
    transform: scale(.8);
    opacity: .7;
  }
}
@-webkit-keyframes fade2{
  0%{
    -webkit-transform: scale(.8);
    opacity: .7;
  }
  50%{
    -webkit-transform: scale(1);
    opacity: 1;
  }
  100%{
    -webkit-transform: scale(.8);
    opacity: .7;
  }
}

//requires jQuery because I am lazy.


$(document).ready(function(){
  setup();
});


function setup(){
  
  var $passage = $('#weirdtext');
  
  //get the inner HTML of the #weirdtext paragraph
  var rawtxt = $passage.html();
  
  //Get the length of the string for use in loop
  var len = rawtxt.length;
  
  //empty string used to store final text that includes spans
  var newtext = '';

  
  //For each character inside #weirdtext string (this is why we got length)
  for(var i = 0; i < len; i ++){
    
    //get a random num between 1 and 5
    var rng = Math.floor(Math.random() * 5) + 1;
    
    //get the i-th character from the string
    var currentchar = rawtxt.charAt(i);
    if(currentchar == ' '){
      //if it's a space, add an empty .space span
      var newchar = '<span class="space"></span>';
    }
    else{
      //otherwise, wrap it with a span, and give it class effectN, where N is a random int as before
      var newchar = '<span class="effect' + rng + '">' + currentchar + '</span>';
    }
    //add this new "char" (actually it's a char with spans wrapping it) to the empty string
    newtext = newtext + newchar;
  }
  
  //replace #weirdtext paragraphs inner HTML with the newly created string
  $passage.html(newtext);
  
}