→のcssアニメーション

<!-- ① -->
<figcaption>
<h4 data-letters="Create life is freedom"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Create life is freedom</font></font></h4>
</figcaption>
<figcaption>
<h4 data-letters="Create life is freedom"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Create life is freedom</font></font></h4>
</figcaption>
<!-- ② -->
<p class="text-progress" data-txt="Create life is freedom">Create life is freedom</p>
<p class="text-progress" data-txt="Create life is freedom">Create life is freedom</p>
<!-- ③ -->
<a href="" class="button-link"><span><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Create life is freedom</font></font></span><i class="arrow"></i></a>
<!-- ④ -->
<a  class="hover" href="#">Create life is freedom</a>

/* ① */
figcaption h4 {
  position: relative;
  overflow: hidden;
  display: inline-block;
}
figcaption h4:hover:before {
  width: 100%;
}
figcaption h4:before {
  content: attr(data-letters);
  position: absolute;
  z-index: 2;
  overflow: hidden;
  color: #f5aa95;
  color: blue;
  white-space: nowrap;
  width: 0%;
  -webkit-transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* ② */
.text-progress {
  position: relative;
  width: 300px;
  height: 100px;
  line-height: 100px;
  margin: 0 auto;
  font-size: 20px;
  text-align: center;
  color: #ccc;
}
.text-progress::after {
  content: attr(data-txt);
  position: absolute;
  top: -24px;
  left: 0;
  width: 100%;
  height: 100px;
  line-height: 100px;
  color: #1a1e24;
  color: blue;
  clip: rect(0,0,100px,0);
  transition: clip 1.5s linear;
}
.text-progress:hover::after {
  clip: rect(0,300px,100px,0);
}
/* ③ */
a {
  text-decoration: none;
  cursor: pointer;
}
a.button-link {
font: normal 700 14px/14px 'Poppins', serif;
letter-spacing: 5px;
color: #262b2e;
text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-block;
  padding: 0px 20px 0px 0px;
}
a.button-link span {
padding: 0px 0px 0px 60px;
position: relative;
z-index: 2;
}
a.button-link:before {
position: relative;
  top: 7px;
  left: 0px;
  width: 40px;
  height: 2px;
  display: block;
  content: '';
  background-color: #f5aa95;
  -webkit-transition: left 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: left 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: left 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: left 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 1;
}
a.button-link i {
position: relative;
  top: -1px;
  left: 10px;
  width: 5px;
  height: 8px;
  display: inline-block;
  padding: 0px 0px 0px 10px;
  margin:0;
  background-image: url(‘〇〇’.png);
  background-size: 5px 8px;
  background-repeat: no-repeat;
  background-position: center right;
  -webkit-transition: left 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: left 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: left 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: left 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 1;
}
a.button-link:hover:before {
left: 100%;
}
a.button-link:hover i {
left: 45px;
}
/* ④ */
a.hover {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
  background: linear-gradient(to left, black, black 50%, blue 50%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 100%;
  transition: background-position 275ms ease;
}
a.hover:hover {
  background-position: 0 100%;
}