<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);
}
This Pen doesn't use any external CSS resources.