Published
Edited
Feb 27, 2021
md`# experimenting with typewriter effect`
html`<div class="css-typing">
<div class="css-typing">ENCLOSED HEREIN ARE THE RECORDS OF ALL PATHOSCRIPTS TRANSMITTED BY MS. DOLORES <br></div><div class="css-typing:nth-child(2)">LUCERO BETWEEN THE TERRAN CALENDAR DATES OF SEPTEMBER 20, 2128, AND MARCH 15, 2130. </div> <div class="css-typing:nth-child(3)"> THESE CLASSIFIED DOCUMENTS ARE OF THE HIGHEST SENSITIVITY AND ARE TO REMAIN ONLY IN </div> <div class="css-typing:nth-child(4)">THE POSSESSION OF INDIVIDUALS AUTHORIZED BY THE STATE DEPARTMENT OF THE MARTIAN </div> <div class="css-typing:nth-child(4)"> HUMAN UNION.</div>
</div>`
html`<div class="css-typing">
<p>
ENCLOSED HEREIN ARE THE RECORDS OF ALL PATHOSCRIPTS TRANSMITTED BY MS.
</p>
<p>
DOLORES LUCERO BETWEEN THE TERRAN CALENDAR DATES OF SEPTEMBER 20, 2128,
</p>
<p>
AND MARCH 15, 2130. THESE CLASSIFIED DOCUMENTS ARE OF THE HIGHEST
</p>
<p>
SENSITIVITY AND ARE TO REMAIN ONLY IN THE POSSESSION OF INDIVIDUALS
</p>
<p>
AUTHORIZED BY THE STATE DEPARTMENT OF THE MARTIAN HUMAN UNION.
</p>
</div>`
html`
<style>
.css-typing p {
border-right: .15em solid orange;
font-family: "Courier";
font-size: 14px;
color: #39FF14;
width: 50em;
background-color: black;
white-space:nowrap;
overflow:hidden;
padding : 0;
margin : 0;
line-height : 20px;
}
.css-typing p:nth-child(1) {
width: 50em;
-webkit-animation: type 2s steps(40, end);
animation: type 2s steps(40, end);
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.css-typing p:nth-child(2) {
width: 50em;
opacity: 0;
-webkit-animation: type2 2s steps(40, end);
animation: type2 2s steps(40, end);
-webkit-animation-delay: 1.8s;
animation-delay: 1.8s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.css-typing p:nth-child(3) {
width: 50em;
opacity: 0;
-webkit-animation: type2 2s steps(40, end);
animation: type2 2s steps(40, end);
-webkit-animation-delay: 3.6s;
animation-delay: 3.6s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.css-typing p:nth-child(4) {
width: 50em;
opacity: 0;
-webkit-animation: type2 2s steps(40, end);
animation: type2 2s steps(40, end);
-webkit-animation-delay: 5.4s;
animation-delay: 5.4s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.css-typing p:nth-child(5) {
width: 50em;
opacity: 0;
-webkit-animation: type2 2s steps(40, end);
animation: type2 2s steps(40, end);
-webkit-animation-delay: 7.2s;
animation-delay: 7.2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@keyframes type {
0% {
width: 0;
}
99.9% {
border-right: .15em solid orange;
}
100% {
border: none;
}
}
@-webkit-keyframes type {
0% {
width: 0;
}
99.9% {
border-right: .15em solid orange;
}
100% {
border: none;
}
}
@keyframes type2 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: .15em solid orange;
}
100% {
opacity: 1;
border: none;
}
}
@-webkit-keyframes type2 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: .15em solid orange;
}
100% {
opacity: 1;
border: none;
}
}
@keyframes type3 {
0% {
width: 0;
}
1% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes type3 {
0% {
width: 0;
}
1% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@keyframes blink {
50% {
border-color: transparent;
}
}
@-webkit-keyframes blink {
50% {
border-color: tranparent;
}
}
</style>`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
