CSS Animation – Text

CODEPEN:

CSS Animation – Text

---

Github: https://github.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/tree/master/Text%20Animation

---

HTML CODE:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
  
<h1 class="start">
        <span class="end1">c</span><span class="middle1">odeblogge</span>
        <span class="middle2"><i class="fas fa-code"></i></span><span class="end2">r</span>
    </h1>

---

CSS CODE:

body {
    display: flex;
    background: #262626;
    align-items: center;
    justify-content: center;
    font-family: 'Lucida Sans Unicode';
    font-size: 40px;
    height: 100vh;
    overflow: hidden;
    color: #ff6a00
}
*{ box-sizing: border-box; }
.container{
    display: inline-block;
}
.end1, .middle1, .middle2{
    display: inline-block;
    overflow:hidden;
    height: 1.5em;
}
.end2{
    position:absolute;
    color:#ff6a00
}
.middle1, .middle2{
    color: #cfcfcf
}
.middle1 {
    animation: ani1 5s infinite;
    animation-delay: -3s;
    max-width: 0;
}
.middle2 {
    animation: ani2 5s infinite;
    animation-delay: -3s;
    max-width: 0;
}

@keyframes ani1 {
    0% {
    max-width: 500px;
  }
  
  25% {
    max-width: 0;
  }
  
  75% {
    max-width: 0;
  }
  
  90% {
    max-width: 500px;
  }
  
  100% {
    max-width: 500px;
  }
}

@keyframes ani2 {
    0% {
        max-width: 0;
    }

    25% {
        max-width: 0;
    }

    50% {
        max-width: 500px;
    }

    75% {
        max-width: 0;
    }

    100% {
        max-width: 0;
    }
}