i tried to make this animation so it would pause when i hover on it but every time i do, only the div get paused and the pesudo elements don't so what did i do wrong?
i tried to change the property like making the background color change with hover and it works! so it seems that the problem is something related to the animation but i can't get my hand on it
This is my Css
.task1 {
/* box-sizing: border-box; */
width: 50px;
height: 50px;
margin: 50px auto;
border: #fca900 solid 5px;
border-left: transparent solid 5px;
border-radius: 50%;
position: relative;
-webkit-animation: rotate linear infinite 1s;
animation: rotate linear infinite 1s;
}
.task1::after {
content: "";
width: 70%;
height: 70%;
position: absolute;
top: 2.5px;
left: 2.5px;
border: #2090db solid 5px;
border-top: transparent solid 5px;
border-radius: 50%;
-webkit-animation: rotate linear infinite 1s;
animation: rotate linear infinite 1s;
}
.task1::before {
content: "";
width: 40%;
height: 40%;
position: absolute;
top: 10px;
left: 10px;
border: #e51758 solid 5px;
border-right: transparent solid 5px;
border-radius: 50%;
-webkit-animation: rotate linear infinite 1s;
animation: rotate linear infinite 1s;
}
#-webkit-keyframes rotate {
to {
transform: rotate(1turn);
}
}
#keyframes rotate {
to {
transform: rotate(1turn);
}
}
.task1:hover {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
<div class="task1"></div>
The pseudo elements are styled independently so you need to pause their animations on task1 being hovered as well.
.task1 {
/* box-sizing: border-box; */
width: 50px;
height: 50px;
margin: 50px auto;
border: #fca900 solid 5px;
border-left: transparent solid 5px;
border-radius: 50%;
position: relative;
-webkit-animation: rotate linear infinite 1s;
animation: rotate linear infinite 1s;
}
.task1::after {
content: "";
width: 70%;
height: 70%;
position: absolute;
top: 2.5px;
left: 2.5px;
border: #2090db solid 5px;
border-top: transparent solid 5px;
border-radius: 50%;
animation: rotate linear infinite 1s;
}
.task1::before {
content: "";
width: 40%;
height: 40%;
position: absolute;
top: 10px;
left: 10px;
border: #e51758 solid 5px;
border-right: transparent solid 5px;
border-radius: 50%;
animation: rotate linear infinite 1s;
}
#keyframes rotate {
to {
transform: rotate(1turn);
}
}
.task1:hover,
.task1:hover::after,
.task1:hover::before {
animation-play-state: paused;
}
<div class="task1"></div>
it's happening because you are only pausing task1 not it's pesudos just do this change to your code
.task1::before, .task1::after, .task1:hover {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
Related
I've worked out to attach two different animations to the same element, by using a comma, but the animation is finding compromise instead of executing each in successive order. How do I get one to execute and then the next when it's finished? What I want is right to left and, when finished, top to bottom. what I have is diagonal. Why?
.contact{
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 70px solid red;
position: relative;
top: -50px;
}
.contact:after {
content: '';
position: absolute;
left: -50px;
top: 70px;
width: 0;
height: 0;
border: 50px solid
transparent;
border-top: 70px solid
red;
}
.contact{
margin-left: 200px;
top: 20px; transform:
rotate(90deg);
}
.contact {
animation: fish 4s linear
infinite, fish1 4s linear
infinite; animation-
duration: 4s; animation-iteration-
count: infinite; animation.
direction: alternate;
animation-timing-function: linear;
}
#keyframes fish {
from {right: 100px;} to {right: 1px; position: relative;}
}
#keyframes fish1 {
from {top: 2px;} to {top: 200px;}
}
<div class="contact"></div>
You can try this code
.contact{
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 70px solid red;
position: relative;
top: 0;
margin-left: 0;
transform: rotate(90deg);
float:right;
}
.contact:after {
content: '';
position: absolute;
left: -50px;
top: 70px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid red;
}
.contact {
animation: fish 4s linear infinite;
}
#keyframes fish {
0% {right: 0px; top: 0px;}
25% {right: 200px; top: 0px;}
50% {right: 200px; top: 200px;}
75% {right: 0px; top: 200px;}
100% {right: 0px; top: 0px;}
}
<div class="contact"></div>
Use Animation Keyframes, simply add a percentage for each keyframe. Also there is no need to declare multiple classes .contact, I've merged them into one
.contact{
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 70px solid red;
position: relative;
margin-left: 200px;
top: 20px;
transform: rotate(90deg);
animation: fish 4s linear infinite;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
}
.contact:after {
content: '';
position: absolute;
left: -50px;
top: 70px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid
red;
}
#keyframes fish {
0% { right: 100px; }
50% { right: 1px; top: 2px; }
100% { top: 200px; }
}
<div class="contact"></div>
So, I found this loading screen on the internet and I made a bunch of tweaks to it but I am not sure how to shrink it. Here is my code:
CSS
body {
background-color: #90EE90;
}
#loading-wrapper {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
#loading-text {
display: block;
position: absolute;
top: 100%;
left: 100%;
color: #999;
width: 100px;
height: 30px;
margin: -7px 0 0 -45px;
text-align: center;
font-family: 'PT Sans Narrow', sans-serif;
font-size: 20px;
}
#loading-content {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 170px;
height: 170px;
margin: -85px 0 0 -85px;
border: 3px solid #F00;
}
#loading-content:after {
content: "";
position: absolute;
border: 3px solid #0F0;
left: 15px;
right: 15px;
top: 15px;
bottom: 15px;
}
#loading-content:before {
content: "";
position: absolute;
border: 3px solid #00F;
left: 5px;
right: 5px;
top: 5px;
bottom: 5px;
}
#loading-content {
border: 3px solid transparent;
border-top-color: #20B2AA;
border-bottom-color: #20B2AA;
border-radius: 50%;
-webkit-animation: loader 3.5s linear infinite;
-moz-animation: loader 3.5s linear infinite;
-o-animation: loader 3.5s linear infinite;
animation: loader 3.5s linear infinite;
}
#loading-content:before {
border: 3px solid transparent;
border-top-color: #778899;
border-bottom-color: #778899;
border-radius: 50%;
-webkit-animation: loader 2.5s linear infinite;
-moz-animation: loader 2.5s linear infinite;
-o-animation: loader 2.5s linear infinite;
animation: loader 3s linear infinite;
}
#loading-content:after {
border: 3px solid transparent;
border-top-color: #84417C;
border-bottom-color: #84417C;
border-radius: 50%;
-webkit-animation: loader 1s linear infinite;
animation: loader 1s linear infinite;
-moz-animation: loader 1.5s linear infinite;
-o-animation: loader 1.5s linear infinite;
}
#-webkit-keyframes loaders {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes loader {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
Transform: rotate (0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#content-wrapper {
color: #FFF;
position: fixed;
left: 0;
top: 20px;
width: 100%;
height: 100%;
}
#header
{
width: 800px;
margin: 0 auto;
text-align: center;
height: 100px;
background-color: #666;
}
#content
{
width: 800px;
height: 1000px;
margin: 0 auto;
text-align: center;
background-color: #888;
}
HTML
<div id="loading-wrapper">
<div id="loading-text">LOADING</div>
<div id="loading-content"></div>
</div>
So, I am trying to get my loading screen to be smaller so it doesn't take up so much of the page please. Thanks in advance!
Change the width, height, and margin inside #loading-content proportionally:
#loading-content {
width: 100px;
height: 100px;
margin: -50px 0 0 -50px;
}
Demo Snippet:
body {
background-color: #90EE90;
}
#loading-wrapper {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
#loading-text {
display: block;
position: absolute;
top: 100%;
left: 100%;
color: #999;
width: 100px;
height: 30px;
margin: -7px 0 0 -45px;
text-align: center;
font-family: 'PT Sans Narrow', sans-serif;
font-size: 20px;
}
#loading-content {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 100px;
height: 100px;
margin: -50px 0 0 -50px;
border: 3px solid #F00;
}
#loading-content:after {
content: "";
position: absolute;
border: 3px solid #0F0;
left: 15px;
right: 15px;
top: 15px;
bottom: 15px;
}
#loading-content:before {
content: "";
position: absolute;
border: 3px solid #00F;
left: 5px;
right: 5px;
top: 5px;
bottom: 5px;
}
#loading-content {
border: 3px solid transparent;
border-top-color: #20B2AA;
border-bottom-color: #20B2AA;
border-radius: 50%;
-webkit-animation: loader 3.5s linear infinite;
-moz-animation: loader 3.5s linear infinite;
-o-animation: loader 3.5s linear infinite;
animation: loader 3.5s linear infinite;
}
#loading-content:before {
border: 3px solid transparent;
border-top-color: #778899;
border-bottom-color: #778899;
border-radius: 50%;
-webkit-animation: loader 2.5s linear infinite;
-moz-animation: loader 2.5s linear infinite;
-o-animation: loader 2.5s linear infinite;
animation: loader 3s linear infinite;
}
#loading-content:after {
border: 3px solid transparent;
border-top-color: #84417C;
border-bottom-color: #84417C;
border-radius: 50%;
-webkit-animation: loader 1s linear infinite;
animation: loader 1s linear infinite;
-moz-animation: loader 1.5s linear infinite;
-o-animation: loader 1.5s linear infinite;
}
#-webkit-keyframes loaders {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes loader {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
Transform: rotate (0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#content-wrapper {
color: #FFF;
position: fixed;
left: 0;
top: 20px;
width: 100%;
height: 100%;
}
#header
{
width: 800px;
margin: 0 auto;
text-align: center;
height: 100px;
background-color: #666;
}
#content
{
width: 800px;
height: 1000px;
margin: 0 auto;
text-align: center;
background-color: #888;
}
<div id="loading-wrapper">
<div id="loading-text">LOADING</div>
<div id="loading-content"></div>
</div>
I need a spinner that I can basically insert into the middle of paragraph text. I have the spinner the way I want it as a block-display element (div), but when I try to create it as a span (or change the div to be inline), the spinner doesn't work.
How can I modify this spinner so that it can be dropped into the middle of a sentence (i.e., paragraph text)?
#loader {
float: left;
width: 10px;
height: 10px;
margin-right: 5px;
margin-top: 2px;
border: 2px solid #f3f3f3;
border-radius: 50%;
border-top: 2px solid #3498db;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#loaderInline {
display: inline;
width: 10px;
height: 10px;
margin-right: 5px;
margin-top: 2px;
border: 2px solid #f3f3f3;
border-radius: 50%;
border-top: 2px solid #3498db;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
#-webkit-keyframes animatebottom {
from {
bottom: -100px;
opacity: 0
}
to {
bottom: 0px;
opacity: 1
}
}
#keyframes animatebottom {
from {
bottom: -100px;
opacity: 0
}
to {
bottom: 0;
opacity: 1
}
}
<p>
<div id="loader"></div>Works as normal DIV
</p>
<p>
<div id="loaderInline"></div>Broken as DIV with inline display
</p>
inline element cannot be sized , inline-block, inline-flex or inline-table does and interact as an inline box.
#loader {
float: left;
width: 10px;
height: 10px;
margin-right: 5px;
margin-top: 2px;
border: 2px solid #f3f3f3;
border-radius: 50%;
border-top: 2px solid #3498db;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#loaderInline {
display: inline-block;
width: 10px;
height: 10px;
margin-right: 5px;
margin-top: 2px;
border: 2px solid #f3f3f3;
border-radius: 50%;
border-top: 2px solid #3498db;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
#-webkit-keyframes animatebottom {
from {
bottom: -100px;
opacity: 0
}
to {
bottom: 0px;
opacity: 1
}
}
#keyframes animatebottom {
from {
bottom: -100px;
opacity: 0
}
to {
bottom: 0;
opacity: 1
}
}
<p>
<div id="loader"></div>Works as normal DIV
</p>
<p>
<div id="loaderInline"></div>Broken as DIV with inline display
</p>
You may as well use a pseudo :before/::before and inline-block:
#loader {
float: left;
width: 10px;
height: 10px;
margin-right: 5px;
margin-top: 2px;
border: 2px solid #f3f3f3;
border-radius: 50%;
border-top: 2px solid #3498db;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
p:before {
content: '';
display: inline-block;
width: 10px;
height: 10px;
margin-right: 5px;
margin-top: 2px;
border: 2px solid #f3f3f3;
border-radius: 50%;
border-top: 2px solid #3498db;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
#-webkit-keyframes animatebottom {
from {
bottom: -100px;
opacity: 0
}
to {
bottom: 0px;
opacity: 1
}
}
#keyframes animatebottom {
from {
bottom: -100px;
opacity: 0
}
to {
bottom: 0;
opacity: 1
}
}
<p>
an inline-block pseudo works too;
</p>
I found loader CSS trick, and I want to put text or image into loader without rotation.
.loader {
border: 5px solid #f3f3f3;
border-radius: 50%;
border-top: 5px solid #fff;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
text-align: center;
line-height: 50px;
margin: 10px auto;
font-size: 12px;
}
.loader > span {
animation: no-spin .5s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes no-spin {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
<div class="loader">
<span>LOGO</span>
</div>
I tried #keyframes no-spin for reverse rotation, but didn't work.
You'll want to add display:block on the <span>. A transform on display:inline will not work (as specified in the spec). In practice this boils down to using display:block or display:inline-block.
I've also modified the animation time of .no-spin to 1s, to match your spin animation speed.
This will give the illusion of not spinning, in actuality it's spinning with the same speed in the opposite direction.
.loader {
border: 5px solid #f3f3f3;
border-radius: 50%;
border-top: 5px solid #fff;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
text-align: center;
line-height: 50px;
margin: 10px auto;
font-size: 12px;
}
.loader > span {
display: block;
animation: no-spin 1s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes no-spin {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
<div class="loader">
<span>LOGO</span>
</div>
Use the spin on a pseudo element
.loader {
position: relative;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
margin: 10px auto;
font-size: 12px;
}
.loader::after {
content: '';
position: absolute;
top: 0; left: 0;
border: 5px solid #f3f3f3;
border-radius: 50%;
border-top: 5px solid #fff;
width: 100%;
height: 100%;
box-sizing: border-box;
animation: spin 1s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="loader">
<span>LOGO</span>
</div>
I'm trying to achieve a typing effect with multiple lines in CSS.
This was a good reference point I followed:
CSS animated typing
https://css-tricks.com/snippets/css/typewriter-effect/
Now my desired effect is that the first border-right's visibility be hidden once the first blinking cursor's animation ends. A the border-right is still on screen after the animation ends and I want it not to be visible. (As if enter button on a keyboard was pressed.) How would I go about that?
https://jsfiddle.net/6567onn8/5/
.typewriter h1 {
text-align: center;
overflow: hidden;
font-size: 100%;
border-right: .15em solid #fff;
white-space: nowrap;
/* keeps content in one line */
letter-spacing: .15em;
animation: typing 2.5s steps(22, end), blink-caret .75s step-end;
}
.typewriter h2 {
font-size: 100%;
white-space: nowrap;
overflow: hidden;
border-right: .15em solid black;
-webkit-animation: typing 2s steps(26, end), blink-caret 1s step-end infinite;
-webkit-animation-delay: 3s;
-webkit-animation-fill-mode: both;
-moz-animation: typing 2s steps(26, end), blink-caret 1s step-end infinite;
-moz-animation-delay: 3s;
}
/* The typing effect */
#keyframes typing {
from {
width: 0
}
to {
width: 9em;
}
}
#keyframes blink-caret {
from, to {
border-color: transparent
}
50% {
border-color: #000;
}
}
<div class="typewriter">
<h1>Hi. I'm Andy.</h1>
<h2>I love learning.</h2>
</div>
Just take out infinite
.typewriter h1 {
text-align: center;
overflow: hidden;
font-size: 100%;
border-right: .15em solid #fff;
white-space: nowrap;
/* keeps content in one line */
letter-spacing: .15em;
animation: typing 2.5s steps(22, end), blink-caret .75s step-end;
}
.typewriter h2 {
font-size: 100%;
white-space: nowrap;
overflow: hidden;
border-right: .15em solid black;
-webkit-animation: typing 2s steps(26, end), blink-caret 1s step-end;
-webkit-animation-delay: 3s;
-webkit-animation-fill-mode: both;
-moz-animation: typing 2s steps(26, end), blink-caret 1s step-end;
-moz-animation-delay: 3s;
}
/* The typing effect */
#keyframes typing {
from {
width: 0
}
to {
width: 9em;
}
}
#keyframes blink-caret {
from, to {
border-color: transparent
}
50% {
border-color: #000;
}
}
<div class="typewriter">
<h1>Hi. I'm Andy.</h1>
<h2>I love learning.</h2>
</div>
body{
margin: 0;
font-family: 'Pacifico', cursive;
}
.blackboard-wrapper {
width: 100vw;
height: 100vh;
background-image: repeating-linear-gradient(to bottom,#26180B 70%,#362418 77%,#77736A 78%,#655444 78%);
}
.black-board {
height: 360px;
width: 800px;
transform: translateY(70px);
margin: 0 auto;
background-image: repeating-linear-gradient(to bottom,#000000 77%,#111111 78%,#222222 77%,#000000 78%);
border-width: 15px;
border-style: groove;
border-color: #2E1E11;
position: relative;
color: #ffffff;
}
.date {
position: absolute;
left: 15px;
top: 10px;
}
.date > span {
display: block;
margin-bottom: 5px;
}
.black-board::before {
position: absolute;
left: 0;
content: "";
right: 0;
background-color: #afafaf;
height: 2px;
top: 94px;
}
.topic {
position: absolute;
top: 28px;
left: 50%;
transform: translateX(-50%);
text-decoration: underline;
word-spacing: 8px;
}
.writing {
position: absolute;
top: 120px;
left: 15px;
right: 15px;
bottom: 15px;
}
.writing::after,
.writing::before {
position: absolute;
letter-spacing: 2px;
font-size: 30px;
animation-name: write;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(.7,.45,.97,.36);
}
.writing::before{
font-size: 25px;
content:"This is cool NAAA???";
top: 70px;
color: #1FBEA6;
animation-name: write2;
animation-duration: 2s;
animation-iteration-count: 1;
animation-timing-function: cubic-bezier(.7,.45,.97,.36);
}
#keyframes write{
0%{content:"";}
3%{content:"V_";}
6%{content:"VI_";}
9%{content:"VIK_";}
12%{content:"VIKA_";}
15%,25%{content:"VIKAS";}
28%{content:"VIKA_";}
31%{content:"VIK_";}
34%{content:"VI_";}
37%{content:"V_";}
40%,50%{content:"";}
53%{content:"P_";}
56%{content:"PA_";}
59%{content:"PAT_";}
62%{content:"PATE_";}
65%,75%{content:"PATEL";}
78%{content:"PATE_";}
81%{content:"PAT_";}
84%{content:"PA_";}
88%{content:"P_";}
91%,100%{content:"";}
}
#keyframes write2{
0%{content:"";}
5%{content:"T_";}
10%{content:"Th_";}
15%{content:"Thi_";}
20%{content:"This_ ";}
25%{content:"This i_";}
30%{content:"This is_";}
35%{content:"This is_ ";}
40%{content:"This is c_";}
45%{content:"This is co_";}
50%{content:"This is coo_";}
55%{content:"This is cool_";}
65%{content:"This is cool N_";}
70%{content:"This is cool NA_";}
75%{content:"This is cool NAA_";}
80%{content:"This is cool NAAA";}
85%{content:"This is cool NAAA?";}
90%{content:"This is cool NAAA??";}
95%{content:"This is cool NAAA???";}
100%{content:"This is cool NAAA???";}
}
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<div class="blackboard-wrapper">
<div class="black-board">
<div class="date">
<span>DATE</span>
<span>25|oct|2018</span>
</div>
<div class="topic">TYPING EFFECT USING CSS</div>
<div class="writing"></div>
</div>
</div>
https://codepen.io/Vikaspatel/pen/mzarrO
.wrapper {
height: 100vh;
/*This part is important for centering*/
display: flex;
align-items: center;
justify-content: center;
}
.typing-demo {
width: 22ch;
animation: typing 2s steps(22), blink .5s step-end infinite alternate;
white-space: nowrap;
overflow: hidden;
border-right: 3px solid;
font-family: monospace;
font-size: 2em;
}
#keyframes typing {
from {
width: 0
}
}
#keyframes blink {
50% {
border-color: transparent
}
}
<div class="wrapper">
<div class="typing-demo">
This is a typing demo.
</div>
</div>
Easiest way of doing it in CSS.