<link href='https://fonts.googleapis.com/css?family=Raleway:400,500,600,700,800,900,300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Titillium+Web:400,400italic,600,600italic,300,700' rel='stylesheet' type='text/css'>
<div class="main-content">
  <h1>Crush this title</h1>
  <span class="bounced-word anim_1">Bounce first sentence</span>
  <span class="bounced-word anim_2">Bounce second sentence</span>
  <span class="bounced-word anim_3">Bounce third sentence</span>
  <span class="bounced-word anim_4">Bounce fourth sentence</span>
</div>
@import "compass/css3";

// Settings
$color1 : #56baff;
$ral : "Raleway";
$titi : "Titillium Web";

body {
  background: black;
  color:white;
}

.main-content {
  height:100vh;
  position: relative;
  text-align:center;
  width:100%;
  h1 {
    animation: 2s explode_title infinite;
    font-family:$ral;
    font-size:40px;
    font-weight:400;
    position:absolute;
    text-transform: uppercase;
    top:150px;
    transform:translate3d(0,0,0);
    width:100%;
  }
  .bounced-word {
    color:$color1;
    display:block;
    font-family:$titi;
    font-size:22px;
    font-weight:600;
    position:absolute;
    text-align:center;
    text-transform: uppercase;
    top:230px;
    transform:translate3d(0,-200px,0);
    width:100%;
  }
  .anim_1 {
    animation: 2s bounced-word infinite, 8s hide infinite;
  }
  .anim_2 {
    animation: 2s bounced-word infinite, 8s hidetwo infinite;
  }
  .anim_3 {
    animation: 2s bounced-word infinite, 8s hidethree infinite;
  }
  .anim_4 {
    animation: 2s bounced-word infinite, 8s hidefour infinite;
  }
}


// Title animation
@keyframes explode_title {
  10% {
    transform:scaleY(0.2);
    transform-origin:0 bottom 0;
  }
  20% {
    transform:scaleY(1.3);
    transform-origin:0 bottom 0;
  }
  30% {
    transform:scaleY(0.7);
    transform-origin:0 bottom 0;
  }
  40% {
    transform:scaleY(1);
    transform-origin:0 bottom 0;
  }
  100% {
    transform:scaleY(1);
    transform-origin:0 bottom 0;
  }
}
// Span Animation
@keyframes bounced-word {
  8% {
    transform:translate3d(0,-45px,0) scaleY(0.4);
    transform-origin:left bottom 0;
  }
  25% {
    transform:translate3d(0,-110px,0) scaleY(1.4);
  }
  40% {
    transform:translate3d(0,0,0) scaleY(0.6);
    transform-origin:left bottom 0;
  }
  50% {
    transform:translate3d(0,0,0) scaleY(1.2);
    transform-origin:left bottom 0;
  }
  60% {
    transform:translate3d(0,0,0) scaleY(1);
    transform-origin:left bottom 0;
  }
  80% {
    opacity:1;
    transform:translate3d(0,0,0);
  }
  100% {
    opacity:0;
    transform:translate3d(0,50px,0);
  }
}

// Hide sentences by time
@keyframes hide {
  0%, 24% {
    visibility:visible;
  }
  25%, 50% {
    visibility:hidden;
  }
  50%, 75% {
    visibility:hidden;
  }
  75%, 100% {
    visibility:hidden;
  }
}
@keyframes hidetwo {
  0%, 25% {
    visibility:hidden;
  }
  26%, 49% {
    visibility:visible;
  }
  50%, 75% {
    visibility:hidden;
  }
  75%, 100% {
    visibility:hidden;
  }
}
@keyframes hidethree {
  0%, 25% {
    visibility:hidden;
  }
  25%, 50% {
    visibility:hidden;
  }
  51%, 74% {
    visibility:visible;
  }
  75%, 100% {
    visibility:hidden;
  }
}

@keyframes hidefour {
  0%, 25% {
    visibility:hidden;
  }
  25%, 50% {
    visibility:hidden;
  }
  50%, 75% {
    visibility:hidden;
  }
  76%, 100% {
    visibility:visible;
  }
}
View Compiled 
/* See with just blocks : https://codepen.io/Eprz/pen/MYbJzJ */
/* See with 1 sentence : https://codepen.io/Eprz/pen/raWjJj */

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.