Home Text Fade Slider

Site URL: https://www.87percent.co.uk/

Hi,

I'd like to add a text fade-in slider here on the home page: https://www.87percent.co.uk/

I'd like the top text to slowly fade away and change to a different text. Something like here: https://codepen.io/kubulu/pen/zBxOoj

How do I get to do this?

Thank you!

Add a Code Block > Paste this Codepen code

<div class='slider'>
  <div class='slide1'>Web Application Developement</div>
  <div class='slide2'>Mobile Application Developement</div>
  <div class='slide3'>Cloud Technology</div>
  <div class='slide4'>Cloud Technology</div>
</div>
<style>
  .slider {
  max-width: 600px;
  height: 50px;
  margin: 20px auto;
  position: relative;
  font-size:40px;
  text-align:center;
}
.slide1,.slide2,.slide3,.slide4 {
  position: absolute;
  width: 100%;
  height: 100%;
  font-size:70px;
}
.slide1 {
  
    animation:fade 20s infinite;
-webkit-animation:fade 20s infinite;

} 
.slide2 {
 
    animation:fade2 20s infinite;
-webkit-animation:fade2 20s infinite;
}
.slide3 {
   
    animation:fade3 20s infinite;
-webkit-animation:fade3 20s infinite;
}
.slide4 {
   
    animation:fade3 20s infinite;
-webkit-animation:fade3 20s infinite;
}
@keyframes fade
{
  0%   {opacity:0}
  20% { opacity: 1}
  40% { opacity: 0}
  60% { opacity: 0}
  80% { opacity: 0}
  100% { opacity: 0}
}
@keyframes fade2
{
  0%   {opacity:0}
  20% { opacity: 0}
  40% { opacity: 1}
  60% { opacity: 0}
  80% { opacity: 0}
  100% { opacity: 0}
}
@keyframes fade3
{
  0%   {opacity:0}
  20% { opacity: 0}
  40% { opacity: 0}
  60% { opacity: 1}
  80% { opacity: 0}
  100% { opacity: 0}
}
@keyframes fade4
{
  0%   {opacity:0}
  20% { opacity: 0}
  40% { opacity: 0}
  60% { opacity: 0}
  80% { opacity: 1}
  100% { opacity: 0}
}
</style>