Expression Slider - Sliding The Right Words.markdown

Expression Slider - Sliding The Right Words

Words that express, put into the right place.

Forked from Praveen Puglia's Pen Expression Slider - Sliding The Right Words.

Forked from Praveen Puglia's Pen Expression Slider - Sliding The Right Words.

A Pen by Wilfred on CodePen.

License.

index.html

<h1 class="tagline">... because 
  <span class="change-container">
    <span class="changing">exercises</span> 
    <span class="changing">practice</span> 
    <span class="changing">mentoring</span> 
    <span class="changing">iterations</span> 
  </span>
  will make you perfect</h1>

style.css

*{
  margin: 0;
  padding: 0;
}
body{
  background: #222;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  color:#fff;
}
.tagline {
  margin-top: 100px;
  text-align: center;
}
.change-container {
  position: relative;
  display: inline-block;
  width:200px;
  border-bottom:1px solid red;
  margin-bottom:-10px;
}
.changing {
  position:absolute;
  overflow:hidden;
  display: inline-block;
  color:red;
  width:100%;
  left:0;
  bottom:0;
  height:0;
  opacity:0;
  text-rendering:optimizeLegibility;
  animation : revealNextWord 8s ease-in-out infinite;
}

.changing:nth-child(2) {
  animation-delay:2s;
}
.changing:nth-child(3) {
  animation-delay:4s;
}
.changing:nth-child(4) {
  animation-delay:6s;
}

@keyframes revealNextWord {
    0% { opacity: .3; height: 0; }
    10% { opacity: 1; height: 1.2em; }
    20% { opacity: 1; height: 1.2em; }
	  28% { opacity: 0; height:2em;}
    100% { opacity: 0; }
}