CSS-Typing.markdown

CSS Typing

A Pen by thomas on CodePen.

License.

index.html

<section class="rw-wrapper">
				<h2 class="rw-sentence">
					<span class="cursor">I WANT NOTHING BUT</span>
          <br>
					<div class="rw-words">
            <div class="animation">
            <span class="type">beaches<span>_</span></span>
						<span class="type">color<span>_</span></span>
						<span class="type">happiness<span>_</span></span>
						<span class="type">wonder<span>_</span></span>
						<span class="type">sugar<span>_</span></span>
						<span class="type">sunshine<span>_</span></span>
					</div>
            </div>
				</h2>
		<input type="text" id="type" class="type-input"  maxlength="22" rows="1" wrap="off">
			</section>

script.js

$( ".type-input" ).focus(function() {
  $( ".animation" ).addClass("hidden");
});

style.css

body {
   font-family: "HelveticaNeue-Light", sans-serif; 
  font-size: 16px;
}

.hidden { 
  display: none;
}

*:focus {
    outline: 0;
}

.type-input {
  font-family: Consolas, monaco, monospace;
  position:relative;
  z-index: 9999; 
  border: none; 
  background: transparent;
  font-size: 24px;
  color: #444; 
	font-weight: normal;
  width: 100%;
  margin-left: -2px;
} 

.rw-wrapper{
	margin: 20px auto 0 auto;
	padding: 10px;
}

.rw-sentence{
	margin: 0;
}

.rw-sentence span{
	color: #444;
	font-weight: normal;
}

.rw-words{ 
	display: inline;
  font-family: Consolas, monaco, monospace;
}

.type{
	position: absolute;
	opacity: 0;
	overflow: hidden;
	-webkit-animation: words 24s steps(48) infinite 0s;
}
.type:nth-child(2) { 
  -webkit-animation-delay: 4s; 
  animation-delay: 4s; 
}
.type:nth-child(3) { 
  -webkit-animation-delay: 8s;
  animation-delay: 8s; 
}
.type:nth-child(4) { 
  -webkit-animation-delay: 12s;
	animation-delay: 12s; 
}
.type:nth-child(5) { 
  -webkit-animation-delay: 16s; 
	animation-delay: 16s; 
}
.type:nth-child(6) { 
  -webkit-animation-delay: 20s;
	animation-delay: 20s; 
}

@-webkit-keyframes words {
  0% { opacity: 0; width: 0; }
  2% { opacity: 1;}
  14% { opacity: 1; width: 48ch;}
  15% { opacity: 0; }
}

span > span {
	animation: cursor 0.8s infinite;
}

@keyframes cursor {
	0% {
		opacity: 0;
	}
	20% { 
		opacity: 0;
	}
	30% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}