Cacher is the code snippet organizer for pro developers

<div class="frame grade5">
  <div class="text mirror">ここは鏡文字を反転させます</div><br>
  <div class="text eachcharcolor"><span class="eachcharcolor__1">1</span><span class="eachcharcolor__2">文</span><span class="eachcharcolor__3">字</span><span class="eachcharcolor__4">ず</span><span class="eachcharcolor__5">つ</span></div><br>
  <div class="textbox outline">これは外枠から表示されます</div><br>
  <div class="text smoke">これはテキストが煙になります</div><br>
  <div class="group_text_from_line">
    <div class="text text_from_line text_from_line_upper">このテキストは上に出てくる</div>
    <div class="line_from_center"></div>
    <div class="text text_from_line text_from_line_lower">これは下に</div>
  </div>
  <div class="textbox"><span class="eachchar eachchar1">1</span><span class="eachchar eachchar2">文</span><span class="eachchar eachchar3">字</span><span class="eachchar eachchar4">ず</span><span class="eachchar eachchar5">つ</span></div>
  <div class="text">
    <span class="eachcharslide eachcharslide1">1</span><span class="eachcharslide eachcharslide2">文</span><span class="eachcharslide eachcharslide3">字</span><span class="eachcharslide eachcharslide4">ず</span><span class="eachcharslide eachcharslide5">つ</span>
  </div>
  <div class="text1by1box">
    <div class="text text1by1 text1by11"><div class="textslidein1">このテキストは3連続です</div></div><br>
    <div class="text text1by1 text1by12"><div class="textslidein2">これは2つ目</div></div><br>
    <div class="text text1by1 text1by13"><div class="textslidein3">ここは<span class="hlcolor">違う色</span>です</div></div>
  </div>
  <div class="text1by1box">
    <div class="text text1by1 box_expand_under_text text_expand1">このテキストは3連続です</div><br>
    <div class="text text1by1 box_expand_under_text box_expand_under_text2">これは2つ目</div><br>
    <div class="text text1by1 box_expand_under_text box_expand_under_text3">ここは<span class="hlcolor">違う色</span>です</div>
  </div>
  <div class="text1by1box">
    <div class="text text1by1 text1by11">このテキストは3連続です</div><br>
    <div class="text text1by1 text1by12">これは2つ目</div><br>
    <div class="text text1by1 text1by13">ここは<span class="hlcolor">違う色</span>です</div>
  </div>
  <div class="text textblurangle">この文章はぼかしです。長いし<span class="hlcolor">違う色</span>も出てきます。しかも斜めに入って消える</div>
  <div class="text text1">この文章はダミーです。</div>
  <div class="text text2">この文章はzoom in/outです。</div>
  <div class="text text3">この文章はぼかしです。</div>
  <div class="textbox slideinout">この文章はスライドインです。</div>
  <div class="textbox slideinout">この文章はスライドインです。長いし<span class="hlcolor">違う色</span>も出てきます。しかも白いボックス。</div>
  <div class="text text3">この文章はぼかしです。長いし<span class="hlcolor">違う色</span>も出てきます。</div>
</div>

body {
  font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
  text-align: center;
  font-feature-settings: "palt";
}
.hlcolor {
  color: #4af;
}
.frame {
  width: 500px;
  height: 2000px;
  margin: 5px;
  display: inline-block;
  overflow: hidden;
}
.grade5 {
  background: linear-gradient(115.76997376025724deg, rgba(255, 133, 133,1) 12.6%,rgba(255, 178, 150,1) 71%,rgba(255, 178, 150,1) 81%);
  -webkit-animation: 5s ease 0s normal forwards 1 bgmoving;
}
.text {
  font-weight: bold;
  max-width: 350px;
  font-size: 25px; 
  margin: 10px;
  display: inline-block;
}
.group_text_from_line {
  width: 80%;
  margin: auto;
  transition: ease;
}
.line_from_center {
  background-color: black;
  margin: auto; /** this is for centering */
  width: 0%;
  height: 2px;
  -webkit-animation: 1s ease 0s normal forwards infinite showingline;
}
.text_from_line {
    overflow: hidden;
    vertical-align: middle;
    height: 1.5em;
    z-index:0;
}
.text_from_line_upper {
  line-height: 1.5em;
  -webkit-animation: 1s ease 0s normal forwards infinite showinguptext;
}
.text_from_line_lower { 
  font-size: 15px;
  line-height: 1.5em;
  -webkit-animation: 1s ease 0s normal forwards infinite showingdowntext;
}
@keyframes showingdowntext {
  0% {line-height: 0em;opacity:0;}
  49.99% {line-height: 0em;opacity:0;}
  50% {line-height: 0em;opacity:1;}
  100% {line-height: 1.5em;} 
}
@keyframes showinguptext {
  0% {line-height: 4em;}
  50% {line-height: 4em;}
  100% {line-height: 1.5em;}
}
@keyframes showingline {
  0% {width: 0%;}
  100% {width: 100%;}
}
.eachchar1 { -webkit-animation: 5s ease 0s normal forwards infinite eachchar1}
.eachchar2 { -webkit-animation: 5s ease 0s normal forwards infinite eachchar2}
.eachchar3 { -webkit-animation: 5s ease 0s normal forwards infinite eachchar3}
.eachchar4 { -webkit-animation: 5s ease 0s normal forwards infinite eachchar4}
.eachchar5 { -webkit-animation: 5s ease 0s normal forwards infinite eachchar5}
@keyframes eachchar1 {
  0% { filter:blur(15px);opacity:0;}
  3% { filter:blur();opacity:1;}
}
@keyframes eachchar2 {
  0% { filter:blur(15px);opacity:0;}
  3% { filter:blur(15px);opacity:0;}
  6% { filter:blur();opacity:1;}
} 
@keyframes eachchar3 {
  0% { filter:blur(15px);opacity:0;}
  6% { filter:blur(15px);opacity:0;}
  9% { filter:blur();opacity:1;}
}
@keyframes eachchar4 {
  0% { filter:blur(15px);opacity:0;}
  9% { filter:blur(15px);opacity:0;}
  12% { filter:blur();opacity:1;}
}
@keyframes eachchar5 {
  0% { filter:blur(15px);opacity:0;}
  12% { filter:blur(15px);opacity:0;}
  15% { filter:blur();opacity:1;}
}
.eachcharslide {
  display: inline-block;
} 
.eachcharslide1 {
    -webkit-animation: 5s ease 0s normal forwards infinite eachcharslide1;
}
.eachcharslide2 {
    -webkit-animation: 5s ease 0s normal forwards infinite eachcharslide2;
}
.eachcharslide3 {
    -webkit-animation: 5s ease 0s normal forwards infinite eachcharslide3;
}
.eachcharslide4 {
    -webkit-animation: 5s ease 0s normal forwards infinite eachcharslide4;
}
.eachcharslide5 {
    -webkit-animation: 5s ease 0s normal forwards infinite eachcharslide5;
}
@keyframes eachcharslide1 { 
  0% { transform:translate(100px,0) scale(.3,.3);}
  10% { transform:translate(0,0) } 
  25% { opacity:1; }
  90% { transform:translate(0,0);opacity:1; } 
  100% {transform:translate(100px,0);opacity:0; }
}
@keyframes eachcharslide2 {
  0% { transform:translate(100px,0) scale(.3,.3);opacity:0;}
  3% { transform:translate(100px,0);opacity:0;}
  13% { transform:translate(0,0) }
  28% { opacity:1; }
  90% { transform:translate(0,0);opacity:1; } 
  100% {transform:translate(100px,0);opacity:0; }
}
@keyframes eachcharslide3 {
  0% { transform:translate(100px,0) scale(.3,.3);opacity:0;}
  6% { transform:translate(100px,0);opacity:0;}
  16% { transform:translate(0,0) }
  31% { opacity:1; }
  90% { transform:translate(0,0);opacity:1; } 
  100% {transform:translate(100px,0);opacity:0; }
}
@keyframes eachcharslide4 {
  0% { transform:translate(100px,0) scale(.3,.3);opacity:0;}
  9% { transform:translate(100px,0);opacity:0;}
  19% { transform:translate(0,0) }
  34% { opacity:1; }
  90% { transform:translate(0,0);opacity:1; } 
  100% {transform:translate(100px,0);opacity:0; }
}
@keyframes eachcharslide5 {
  0% { transform:translate(100px,0) scale(.3,.3);opacity:0;}
  12% { transform:translate(100px,0);opacity:0;}
  22% { transform:translate(0,0) }
  37% { opacity:1; }
  90% { transform:translate(0,0);opacity:1; } 
  100% {transform:translate(100px,0);opacity:0; }
}
.text1by1box {
/*   display: flex;
  flex-direction: column;
  align-content: space-around; */
  margin: 0;
  text-align: left;
  padding: 30px;
}
.text1by1box > br {
  height: 0;
}
/* .text1by1inbox {
  overflow:hidden;
  margin: 0;
  position: relative;
  z-index: 0;
}
.text1by1inbox:before {
  content: '';
  display: inline-block;
  position: absolute;
  width: 100%;
  height: 100%;
  background: white;
  z-index:-1;
} */
.textslidein1 {-webkit-animation: 5s ease 0s normal forwards infinite textslidein1}
@keyframes textslidein1 {
  0% { transform:translate(-50px,0);opacity:0;}
  5% { transform:translate(-50px,0);opacity:0;} 
  15% { transform:translate(0,0);opacity:1; }
}
.textslidein2 {-webkit-animation: 5s ease 0s normal forwards infinite textslidein2}
@keyframes textslidein2 {
  0% { transform:translate(-50px,0);opacity:0;}
  15% { transform:translate(-50px,0);opacity:0;} 
  25% { transform:translate(0,0);opacity:1; }
}
.textslidein3 {-webkit-animation: 5s ease 0s normal forwards infinite textslidein3}
@keyframes textslidein3 {
  0% { transform:translate(-50px,0);opacity:0;}
  25% { transform:translate(-50px,0);opacity:0;}
  35% { transform:translate(0,0);opacity:1; }
}
.box_expand_under_text {
  background-color: transparent !important;
  position: relative;
  z-index: 0;
}
.text_expand1 {
  -webkit-animation: 5s ease 0s normal forwards infinite text_expand1;
  position: static; /** to delete white bgcolor */
}
.box_expand_under_text:before {
  content: '';
  display: inline-block;
  position: absolute; 
  width: 100%;
  height: 100%;
  background: white;
  z-index:-1;
}
.box_expand_under_text2:before {
  -webkit-animation: 5s ease 0s normal forwards infinite box_expand_under_text2;
}
.box_expand_under_text3:before {
  -webkit-animation: 5s ease 0s normal forwards infinite box_expand_under_text3;
}
.textexpandwithbox2 {-webkit-animation: 5s ease 0s normal forwards infinite textexpandwithbox2}
.textexpandwithbox3 {-webkit-animation: 5s ease 0s normal forwards infinite textexpandwithbox3}
@keyframes text_expand1 {
  0% { width:0}
  20% { width:100%;}
}
@keyframes box_expand_under_text2 {
  0% { width:0}
  10% { width:0}
  30% { width:100%;}
}
@keyframes box_expand_under_text3 {
  0% { width:0}
  20% { width:0}
  50% { width:100%;}
}
@keyframes textexpandwithbox2 {
  0% { transform:translate(-80px,0);opacity:0;}
  10% { transform:translate(-80px,0);opacity:1;}
  20% { transform:translate(0,0) }
  35% { opacity:1; }
  90% { transform:translate(0,0);opacity:1; } 
  100% {transform:translate(100px,0);opacity:0; }
}
.text1by1 {
  overflow: hidden;
  vertical-align: middle; /** cancel  margin which is provided by overflow: hidden; */
  white-space: nowrap;
  margin: 0;
  background-color: white;
}
.text1by11 {
    -webkit-animation: 5s ease 0s normal forwards infinite animetext1by11;
}
.text1by12 {
    -webkit-animation: 5s ease 0s normal forwards infinite animetext1by12;
}
.text1by13 {
    -webkit-animation: 5s ease 0s normal forwards infinite animetext1by13;
}
@keyframes animetext1by11 {
  0% { transform:translate(-80px,0)}
  10% { transform:translate(0,0) }
  25% { opacity:1; }
  90% { transform:translate(0,0);opacity:1; }
  100% {transform:translate(100px,0);opacity:0; }
}
@keyframes animetext1by12 {
  0% { transform:translate(-80px,0);opacity:0;}
  10% { transform:translate(-80px,0);opacity:0;}
  20% { transform:translate(0,0) }
  35% { opacity:1; }
  90% { transform:translate(0,0);opacity:1; } 
  100% {transform:translate(100px,0);opacity:0; }
}
@keyframes animetext1by13 {
  0% { transform:translate(-80px,0);opacity:0;}
  20% { transform:translate(-80px,0);opacity:0;}
  30% { transform:translate(0,0) }
  45% { opacity:1; }
  90% { transform:translate(0,0);opacity:1; }
  100% {transform:translate(100px,0);opacity:0; }
}
.textbox {
  letter-spacing: -.05em;
  font-weight: bold;
  max-width: 350px;
  font-size: 25px;
  margin: 10px;
  padding: 10px;
  background-color: white;
  display: inline-block;
}
.text1 {
  -webkit-animation: 5s linear 0s normal forwards infinite blur;
}
.text2 {
  -webkit-animation: 5s linear 0s normal forwards infinite zoominout;
}
.text3 { 
  -webkit-animation: 5s ease 0s normal forwards infinite blurbyfilter;
}
.textblurangle {
  -webkit-animation: 5s ease 0s normal forwards infinite blurangle;
}
.slideinout {
  -webkit-animation: 5s ease 0s normal forwards infinite animeslideinout;
}
@keyframes blurangle {
  0% { filter:blur(8px);transform:translate(-10px,-10px); }
  10% { filter:blur(1px);transform:translate(0,0); }
  25% { filter:blur();opacity:1; }
  80% { filter:blur();opacity:1;;transform:translate(0,0); }
  100% { filter:blur(4px);opacity:0;transform:translate(10px,10px); }
}
@keyframes animeslideinout {
  0% { transform:translate(-80px,0)}
  10% { transform:translate(0,0) }
  25% { opacity:1; }
  90% { transform:translate(0,0);opacity:1; } 
  100% {transform:translate(100px,0);opacity:0; }
}
@keyframes blurbyfilter {
  0% { filter:blur(8px) }
  10% { filter:blur(1px) }
  25% { filter:blur();opacity:1; }
  80% { filter:blur();opacity:1; }
  100% { filter:blur(4px);opacity:0; }
}
@keyframes zoominout {
  0% { transform: scale(.8,.8) }
  4% { transform: scale(1.2,1.2) }
  6% { transform: scale(.9,.9) }
  8% { transform: scale(1.05,1.05) }
  20% { transform: scale(1,1) }
  80% { transform: scale(1,1);filter:blur();opacity:1; }
  100% { transform: scale(1,1);filter:blur(6px);opacity:0; }
}

.mirror{
  -webkit-animation:5s ease 0s normal forwards infinite mirror;
}

@keyframes mirror {
  0% {
    opacity:0;
    -webkit-transform:rotateX(180deg)
  }
  100% {
    opacity:1;
    -webkit-transform:rotateY(0deg)
  }
}

.eachcharcolor .eachcharcolor__1{
  -webkit-animation : 5s ease 0s normal forwards infinite eachcharcolor__1;
}

.eachcharcolor .eachcharcolor__2{
  -webkit-animation : 5s ease 0s normal forwards infinite eachcharcolor__2;
}

.eachcharcolor .eachcharcolor__3{
  -webkit-animation : 5s ease 0s normal forwards infinite eachcharcolor__3;
}

.eachcharcolor .eachcharcolor__4{
  -webkit-animation : 5s ease 0s normal forwards infinite eachcharcolor__4;
}

.eachcharcolor .eachcharcolor__5{
  -webkit-animation : 5s ease 0s normal forwards infinite eachcharcolor__5;
}

@keyframes eachcharcolor__1 {
  0% {
    color:black
  }
  10% {
    color:white
  }
  20% {
    color:black
  }
}

@keyframes eachcharcolor__2 {
  5% {
    color:black
  }
  15% {
    color:white
  }
  25% {
    color:black
  }
}

@keyframes eachcharcolor__3 {
  10% {
    color:black
  }
  20% {
    color:white
  }
  30% {
    color:black
  }
}

@keyframes eachcharcolor__4 {
  15% {
    color:black
  }
  25% {
    color:white
  }
  35% {
    color:black
  }
}

@keyframes eachcharcolor__5 {
  20% {
    color:black
  }
  30% {
    color:white
  }
  40% {
    color:black
  }
}

.outline {
  color:white;
  -webkit-text-stroke: 0.2px white;
  -webkit-animation:5s ease 0s normal forwards infinite outline__fill;
}

@keyframes outline__fill {
  0% {
    color:white;
    -webkit-text-stroke: 0.2px white;
  }
  10% {
    color:white;
    -webkit-text-stroke: 0.2px black;
  }
  20%{
    color:white;
  }
  100% {
    color:black
  }
}

.smoke {
  -webkit-animation:5s ease 0s infinite forwards smoke;
  white-space:nowrap;
}

@keyframes smoke{
  0% {
    color:black;
  }
  30% {
    color:white;
  }
  60% {
    color:white;
    filter:blur(6px);
    opacity:1;
    -webkit-transform:scale(1,1);
  }
  100% {
    color:white;
    filter:blur(12px);
    opacity:0;
    -webkit-transform:scale(4,4)
  }
}