Link to article: SCP-8264.
.typewriter{
overflow: hidden; /* Ensures the content is not revealed until the animation */
white-space: nowrap;
margin: 0; /* Gives that scrolling effect as the typing happens */
letter-spacing: .15em; /* Adjust as needed */
animation:
typing 1s steps(40, end);
}
.typewriterhiding{
overflow: hidden;
visibility: hidden;
animation: 1s fadeIn 8s;
animation-fill-mode: forwards;
}
.typewriteranswer{
overflow: hidden; /* Ensures the content is not revealed until the animation */
border-right: .15em solid orange; /* The typwriter cursor */
white-space: nowrap;
width: 0;
margin: 0; /* Gives that scrolling effect as the typing happens */
letter-spacing: .15 em; /* Adjust as needed */
animation:
typing 10s steps(90, end),
blink-caret .75s ease-out 60s;
animation-delay: 2.5s;
animation-fill-mode: forwards;
}
.typewriteranswerresponse{
overflow: hidden; /* Ensures the content is not revealed until the animation */
width: 0;
white-space: nowrap;
margin: 0; /* Gives that scrolling effect as the typing happens */
letter-spacing: .15em; /* Adjust as needed */
animation:
typing 1s steps(40, end);
animation-delay: 5s;
animation-fill-mode: forwards;
}
/* The typing effect */
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
/* The typewriter cursor effect */
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: orange; }
}
/* Wait to appear */
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
visibility: visible;
opacity: 1;
}
}
.email {
border: solid 2px #000000;
width: 88%;
padding: 1px 15px;
margin: 10px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
background-color: white;
}
.tofrom {
margin-left: 10px;
margin-top: 5px;
padding: 1px 15px;
border-left: solid 3px maroon
}
.containercontainer {
position: relative;
width: auto;
height: auto;
border: 2px solid #666;
background: #141212;
color: #3F3;
margin-top: 1em;
margin-bottom: 1em;
}
.containercontainer .container .overlay {
background: rgba(51, 255, 51, 0.9);
color: #121010;
position: absolute;
width: auto;
height: 50px;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
line-height: 50px;
display: inline;
vertical-align: middle;
text-align: center;
font-family: Courier New;
font-size: 30px;
letter-spacing: 5px;
font-weight: bolder;
z-index: 3;
animation: overlay-anim 10s linear;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
}
.overlayback {
background: rgba(187, 187, 187, 0.5);
z-index: 3;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: auto;
height: auto;
animation: overlay-anim 10s linear;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
}
.containercontainer .container {
text-align: center;
width: inherit;
height: inherit;
position: relative;
overflow: hidden;
}
.containercontainer .container::after {
content: " ";
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(21, 19, 19, 0.2);
opacity: 0;
z-index: 2;
}
.containercontainer .container::before {
content: " ";
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(rgba(18, 16, 16, 0.03) 50%, rgba(0, 0, 0, 0.45) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.22), rgba(0, 255, 0, 0.11), rgba(0, 0, 255, 0.22));
z-index: 2;
background-size: 100% 2px, 3px 100%;
}
.no-unfold {
text-align: center;
}
.container h1, .container h2, .container h3, .container h5, .container h6 {
color: #3F3;
}
.container hr {
border-top: 1px dotted #3F3;
border-bottom: none;
}
.container hr {
border-top: 1px solid #3F3;
border-bottom: 1px solid #3F3;
color: transparent;
background-color: transparent;
}
.container hr:after {
display: block;
margin-top: 2px;
border-top: 1px solid #3F3;
border-bottom: 1px solid #3F3;
}
.blinkbar {
animation: blink 1.5s infinite;
letter-spacing: -0.13em;
}
@keyframes blink {
to {
opacity: .0;
}
}
@keyframes overlay-anim {
0% {
visibility: hidden;
}
10% {
visibility: hidden;
}
11% {
visibility: visible;
}
50% {
visibility: hidden;
}
100% {
visibility: hidden;
}
}
#u-start, .textchange div.sitemember:nth-child(2) {
display: none;
}
.type-wrap-wrapper {
position: relative;
text-align: left;
}
.type-wrapper {
background: #555;
}
.typearea {
color: lime;
font-family: "Courier";
font-size: 1.2em;
margin: 10px 0 0 10px;
white-space: nowrap;
overflow: hidden;
width: 0;
}
#u-start:target~.typearea {
width: 100%;
animation: type 4s steps(60, end);
}
.typearea a {
color: lime;
text-decoration: none;
}
.blink {
animation: blink 1s infinite;
}
@keyframes type {
from {
width: 0;
}
}
@keyframes blink {
to {
opacity: .0;
}
}
.buttonwrapper {
text-align: center;
}
.likebutton {
padding: 0.1em 0.5em;
text-decoration: none;
font-size: 1.3em;
background-color: #F4F4F4;
border: 1px solid #AAA;
color: #000;
}
.likebutton:hover {
background-color: #DDD;
color: #000;
border: 1px solid #0098b3;
}
:scp-wiki:component:preview
[info]
:scp-wiki:component:acs-animation
[info]
:scp-wiki:component:anomaly-class-bar-source
[info]
component:image-block
component:image-block
email
tofrom
blockquote
blockquote
email
tofrom
email
tofrom
typewriter
typewriteranswer
typewriteranswerresponse
typewriterhiding
blockquote
blockquote
email
tofrom
blockquote
blockquote
typewriter
typewriteranswer
typewriteranswerresponse
typewriterhiding