<div class="input-text">
<p class="message">Chiang Mai, Thailand <span></span>
</p>
</div>
* {
-webkit-box-sizing: border-box; /* Android ≤ 2.3, iOS ≤ 4 */
-moz-box-sizing: border-box; /* Firefox 1+ */
box-sizing: border-box; /* Chrome, IE 8+, Opera, Safari 5.1 */
}
body, html {
font-family: 'Menlo', monospace;
background-color: #eee;
}
h1, h2, h3, h4, h5, h6, p, ul, ol {
margin: 0;
margin-bottom: 1.5rem;
}
.input-text {
background: #fff;
overflow: hidden;
width: 440px;
margin: 0 auto;
margin-top: 10rem;
padding: .75rem 1rem;
border-radius: 2px;
border: 1px solid #ccc;
box-shadow: inset 0 2px 2px rgba(0,0,0,.1);
}
/* Animation stuff */
.message {
position: relative;
float: left;
margin: 0;
font-size: 2rem;
letter-spacing: 0px;
}
.message span {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 0;
background: #fff;
border-left: 4px solid #167ff0;
-webkit-animation-name: typing, blinking;
-webkit-animation-duration: 5s, 1s;
-webkit-animation-iteration-count: 1, infinite;
-webkit-animation-timing-function: steps(21,end), steps(1,end);
}
@-webkit-keyframes typing {
0% { width: 100%; }
100% { width: 0; }
}
@-webkit-keyframes blinking {
0% { border-color: transparent; }
50% { border-color: #167ff0; }
100% { border-color: transparent; }
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.