<h1>        
  <span>The software you've imagined<br/>for your</span>
  <div class="rotating-words rotating-words-1">
    <span>childcare centre</span>
    <span>local association</span>
    <span>community choir</span>
    <span>martial arts school</span>
    <span>recreational club</span>
  </div>
</h1>

// ROTATING WORDS //
// Rotating Word 1 //
.rotating-words-1 span:nth-child(2) { 
    -webkit-animation-delay: 5s; 
    -moz-animation-delay: 5s; 
    -o-animation-delay: 5s; 
    -ms-animation-delay: 5s; 
    animation-delay: 5s; 
    color: rgba(255,227,120,1);
}

// Rotating Word 2 //

.rotating-words-1 span:nth-child(3) { 
    -webkit-animation-delay: 10s; 
    -moz-animation-delay: 10s; 
    -o-animation-delay: 10s; 
    -ms-animation-delay: 10s; 
    animation-delay: 10s; 
    color: rgba(255,227,120,1);
}

// Rotating Word 3 //

.rotating-words-1 span:nth-child(4) { 
    -webkit-animation-delay: 15s; 
    -moz-animation-delay: 15s; 
    -o-animation-delay: 15s; 
    -ms-animation-delay: 15s; 
    animation-delay: 15s; 
    color: rgba(255,227,120,1);
}

// Rotating Word 4 //

.rotating-words-1 span:nth-child(5) { 
    -webkit-animation-delay: 20s; 
    -moz-animation-delay: 20s; 
    -o-animation-delay: 20s; 
    -ms-animation-delay: 20s; 
    animation-delay: 20s; 
    color: rgba(255,227,120,1);
}

// Rotating Word 5 //

.rotating-words-1 span:nth-child(6) { 
    -webkit-animation-delay: 25s;
    -moz-animation-delay: 25s; 
    -o-animation-delay: 25s; 
    -ms-animation-delay: 25s; 
    animation-delay: 25s; 
    color: rgba(255,227,120,1);
}

// Rotating Words //

.rotating-words{
    display: inline;
    text-indent: 10px;
}

.rotating-words-1 span{
    position: absolute;
    opacity: 0;
    overflow: hidden;
    color: rgba(255,227,120,1);
    -webkit-animation: rotateWord 25s linear infinite 0s;
    -moz-animation: rotateWord 25s linear infinite 0s;
    -o-animation: rotateWord 25s linear infinite 0s;
    -ms-animation: rotateWord 25s linear infinite 0s;
    animation: rotateWord 25s linear infinite 0s;
}

// Rotating Animation Keys //

@-webkit-keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; -webkit-transform: translateY(-30px); }
    5% { opacity: 1; -webkit-transform: translateY(0px);}
    17% { opacity: 1; -webkit-transform: translateY(0px); }
    20% { opacity: 0; -webkit-transform: translateY(30px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@-moz-keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; -moz-transform: translateY(-30px); }
    5% { opacity: 1; -moz-transform: translateY(0px);}
    17% { opacity: 1; -moz-transform: translateY(0px); }
    20% { opacity: 0; -moz-transform: translateY(30px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@-o-keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; -o-transform: translateY(-30px); }
    5% { opacity: 1; -o-transform: translateY(0px);}
    17% { opacity: 1; -o-transform: translateY(0px); }
    20% { opacity: 0; -o-transform: translateY(30px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@-ms-keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; -ms-transform: translateY(-30px); }
    5% { opacity: 1; -ms-transform: translateY(0px);}
    17% { opacity: 1; -ms-transform: translateY(0px); }
    20% { opacity: 0; -ms-transform: translateY(30px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; transform: translateY(-30px); }
    5% { opacity: 1; transform: translateY(0px);}
    17% { opacity: 1; transform: translateY(0px); }
    20% { opacity: 0; transform: translateY(30px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}