Pure CSS Text Animation

index.html

<section class="container">
  <h1 class="title">
    <span>Hi, I am </span>
    <span>Ishantha</span>
    <span>Udara</span>
  </h1>
  
  <h2 class="title">
    <span>Thank You</span>
    <span>for</span>
    <span>Checking.</span>
    
    
  </h2>
</section>
<span class="usechrome">Contact me through  mail@ishanthaudara.com</span>

pure-css-text-animation.markdown

Pure CSS Text Animation

A Pen by ishantha on CodePen.

License.

style.scss

@import 'https://fonts.googleapis.com/css?family=Baloo+Paaji';

$primary-color: #1e90ff ;
$secondary-color: #ffe221;
$tertiary-color: #ffffff;
  
html, body{
  height: 100%;
}

body{
  font-family: 'Baloo Paaji', cursive;
  background: $primary-color;
  display: flex;
	justify-content: center;
	align-items: center;
}

.container{
  width: 400px;
  height: 220px;
  position: relative;
}

h1, h2{
  font-size: 75px;
  text-transform: uppercase;
  
  
  span{
    width: 100%;
    float: left;
    color: $tertiary-color;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
    transform: translateY(-50px);
    opacity: 0;
    animation-name: titleAnimation;
    animation-timing-function:ease;
    animation-duration: 3s;
  }
}
h1 span{
  animation-delay: 0.6s;
  -webkit-animation-fill-mode: forwards;

  &:first-child{
    animation-delay: 0.7s;

  }

  &:last-child{
    color: $secondary-color;
    animation-delay: 0.5s;
  }
}

h2{ 
  top: 0;
  position: absolute;
  
  span{
    animation-delay: 4.1s;
    -webkit-animation-fill-mode: forwards;

    &:first-child{
      animation-delay: 4.2s;

    }

    &:last-child{
      color: $secondary-color;
      animation-delay: 4s;
    }
  }
}

.usechrome{
  font-size: 10px;
  color: #fff;
  font-family: helvetica, arial;
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
  left: 0;
}

@keyframes titleAnimation {
    0% {
      transform: translateY(-50px);
      opacity: 0;
      -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
      clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
  }
  20% {
      transform: translateY(0);
      opacity: 1;
      -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
      clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
  }
  80% {
       transform: translateY(0);
       opacity: 1;
      -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
      clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
  }
  100% {
       transform: translateY(50px);
       opacity: 0;
      -webkit-clip-path: polygon(100% 0, 100% -0%, 0 100%, 0 100%);
      clip-path: polygon(100% 0, 100% -0%, 0 100%, 0 100%);
    
  }
}