I'm developing some typing animation now.
It works perfect on all browsers except EDGE.
As you can see from the code snippet the cursor should be always visible only at the end of the third row. But on Edge it is visible at the end of each row.
And I guess that my keyframes are not working properly in EDGE.
Pls help.
.css-typing1 p {
border-right: 0.03em solid black;
color: black;
overflow: hidden;
white-space: nowrap;
margin: 0 auto;
letter-spacing: 2px;
font-size: 1em;
text-align: left;
}
.css-typing1 p:nth-child(1) {
width: 18em;
-webkit-animation: type 1.5s steps(40, end);
animation: type 1.5s steps(40, end), blink-caret .5s step-end infinite;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.css-typing1 p:nth-child(2) {
width: 18em;
opacity: 0;
-webkit-animation: type2 1.5s steps(40, end);
animation: type2 1.5s steps(40, end), blink-caret .5s step-end infinite;
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.css-typing1 p:nth-child(3) {
width: 18em;
opacity: 0;
-webkit-animation: type3 1.5s steps(40, end);
animation: type3 1.5s steps(40, end), blink-caret .5s step-end infinite;
-webkit-animation-delay: 3s;
animation-delay: 3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#keyframes type2 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: 0.03em solid black;
}
100% {
opacity: 1;
border: none;
}
}
#-webkit-keyframes type2 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: 0.03em solid black;
}
100% {
opacity: 1;
border: none;
}
}
#keyframes type3 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: 0.03em solid black;
}
100% {
opacity: 1;
/*border: none;*/
}
}
#-webkit-keyframes type3 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: 0.03em solid black;
}
100% {
opacity: 1;
/*border: none;*/
}
}
#keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: black }
}
#keyframes type {
0% {
width: 0;
}
99.9% {
border-right: 0.03em solid black;
}
100% {
border: none;
}
}
#-webkit-keyframes type {
0% {
width: 0;
}
99.9% {
border-right: 0.03em solid black;
}
100% {
border: none;
}
}
<div class="css-typing1">
<p>
Some text for row number 1
</p>
<p>
Some text for row number 2
</p>
<p>
Some text for row number 3
</p>
</div>
The problem is IE Edge not recognizing the CSS property border:none which you have used in your keyframes. In your code use border:0 instead of border:none.
.css-typing1 p {
border-right: 0.03em solid black;
color: black;
overflow: hidden;
white-space: nowrap;
margin: 0 auto;
letter-spacing: 2px;
font-size: 1em;
text-align: left;
}
.css-typing1 p:nth-child(1) {
width: 18em;
-webkit-animation: type 1.5s steps(40, end);
animation: type 1.5s steps(40, end), blink-caret .5s step-end infinite;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.css-typing1 p:nth-child(2) {
width: 18em;
opacity: 0;
-webkit-animation: type2 1.5s steps(40, end);
animation: type2 1.5s steps(40, end), blink-caret .5s step-end infinite;
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.css-typing1 p:nth-child(3) {
width: 18em;
opacity: 0;
-webkit-animation: type3 1.5s steps(40, end);
animation: type3 1.5s steps(40, end), blink-caret .5s step-end infinite;
-webkit-animation-delay: 3s;
animation-delay: 3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#keyframes type2 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: 0.03em solid black;
}
100% {
opacity: 1;
border: 0;
}
}
#-webkit-keyframes type2 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: 0.03em solid black;
}
100% {
opacity: 1;
border: none;
}
}
#keyframes type3 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: 0.03em solid black;
}
100% {
opacity: 1;
/*border: none;*/
}
}
#-webkit-keyframes type3 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: 0.03em solid black;
}
100% {
opacity: 1;
/*border: none;*/
}
}
#keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: black }
}
#keyframes type {
0% {
width: 0;
}
99.9% {
border-right: 0.03em solid black;
}
100% {
border: 0;
}
}
#-webkit-keyframes type {
0% {
width: 0;
}
99.9% {
border-right: 0.03em solid black;
}
100% {
border: none;
}
}
<div class="css-typing1">
<p>
Some text for row number 1
</p>
<p>
Some text for row number 2
</p>
<p>
Some text for row number 3
</p>
</div>
Related
I would like to make an animation that makes the text appear with a prompt like in the following video: https://uploads-ssl.webflow.com/61f84f92347c1507dede5924/624f203e8226d749d47b0806_Animation_Slogan_logo-final-transcode.mp4
But I don't understand how to make it responsive on phone and web, would you have any instructions please?
Also how can I make the border blink on the first 3 words too?
Here is the result I managed to get:
.typewriter {
max-width: 170px;
height: 250px;
position: absolute;
top: 78%;
right: 33%;
transform: translate(33%, -78%);
}
.typewriter p {
height: fit-content;
border-right: .15em solid rgb(0, 0, 0);
font-family: futura-pt;
white-space: nowrap;
overflow: hidden;
letter-spacing: 20px;
font-size: 100%;
}
.typewriter p:nth-child(1) {
width: 90%;
animation: type2 4s steps(40, end);
animation-fill-mode: forwards;
}
.typewriter p:nth-child(2) {
width: 90%;
opacity: 0;
animation: type2 4s steps(40, end);
animation-delay: 4s;
animation-fill-mode: forwards;
}
.typewriter p:nth-child(3) {
width: 90%;
opacity: 0;
animation: type2 4s steps(40, end);
animation-delay: 8s;
animation-fill-mode: forwards;
}
.typewriter p:nth-child(4) {
width: 90%;
opacity: 0;
animation: type2 5s steps(40, end), blink .5s step-end infinite alternate;
animation-delay: 12s;
animation-fill-mode: forwards;
}
#keyframes blink {
50% {
border-color: transparent;
}
}
#keyframes blink2 {
0% {
border-right: .15em solid rgb(0, 0, 0);
}
50% {
border-color: transparent;
}
100% {
border: none;
}
}
#keyframes type {
0% {
width: 0;
}
99.9% {
border-right: .15em solid rgb(0, 0, 0);
}
100% {
border: none;
}
}
#keyframes type2 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: .15em solid rgb(0, 0, 0);
}
100% {
opacity: 1;
border: none;
}
}
#keyframes type3 {
0% {
width: 0;
}
1% {
opacity: 1;
}
100% {
opacity: 1;
}
}
<header>
<h1 class="home-title"><img src="images/logo.png" alt="Invisible" /></h1>
<div class="typewriter" id="typewriter">
<p>keep</p>
<p>your</p>
<p>eyes</p>
<p>open</p>
</div>
</header>
I am trying to get my text that has a typing effect to center in the middle of this div but I can't get it to work. Here below you can see my code that I tried using but it would fit the job. It will still display the text at the left of the div.
<header class="masthead text-white text-center">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-xl-10 css-typing mx-auto ">
<p>
Hey! Ik ben
</p>
<p>
Tom Faas
</p>
</div>
</div>
</div>
</header>
The CSS code:
.css-typing p {
border-right: .15em solid white;
font-family: "Courier";
font-size: 14px;
white-space: nowrap;
overflow: hidden;
}
.css-typing p:nth-child(1) {
width: 7.3em;
text-align: center;
-webkit-animation: type 2s steps(40, end);
animation: type 2s steps(40, end),
blinkTextCursor 500ms steps(44) infinite normal;;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.css-typing p:nth-child(2) {
width: 7.3em;
font-size: 200%;
text-align: center;
opacity: 0;
-webkit-animation: type2 2s steps(40, end);
animation: type2 2s steps(40, end),
blinkTextCursor 500ms steps(44) infinite normal;;
-webkit-animation-delay: 2s;
animation-delay: 2s;
animation-fill-mode: forwards;
}
#keyframes type {
0% {
width: 0;
}
99.9% {
border-right: .15em solid white;
}
100% {
opacity: 1;
border: none;
}
}
#-webkit-keyframes type {
0% {
width: 0;
}
99.9% {
border-right: .15em solid white;
}
100% {
opacity: 1;
border: none;
}
}
#keyframes type2 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: .15em solid white;
}
100% {
opacity: 1;
border: none;
}
}
#-webkit-keyframes type2 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: .15em solid white;
}
100% {
opacity: 1;
border: none;
}
}
As you can see in the example I tried using the mx-auto tagg but It won't center the text and will still put it at the left of the div.
add below CSS property where you use mx-auto. It will center your text.
display: flex;
flex-direction: column;
align-items: center;
I am trying to write text as typing but The typing effect is not writing long text completely and text is not moving to second line in order to complete writing text.
Any css approach is welcomed(avoiding use of js or jquery).
/* Google Fonts */
#import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
/* Global */
html{
min-height: 100%;
overflow: hidden;
}
body{
height: calc(100vh - 8em);
padding: 4em;
color: rgba(255,255,255,.75);
font-family: 'Lato', sans-serif;
background-color: rgb(25,25,25);
}
.line-1{
position: relative;
top: 50%;
width: 100%;
border-right: 2px solid rgba(255,255,255,.75);
font-size: 180%;
text-align: left;
white-space: nowrap;
overflow: hidden;
transform: translateY(-50%);
}
/* Animation */
.anim-typewriter{
animation: typewriter 4s steps(44) 1s 1 normal both,
blinkTextCursor 500ms steps(44) infinite normal;
}
#keyframes typewriter{
from{width: 0;}
to{width: 100%;}
}
#keyframes blinkTextCursor{
from{border-right-color: rgba(255,255,255,.75);}
to{border-right-color: transparent;}
}
<p class="line-1 anim-typewriter">Animation typewriter style using css steps() Animation typewriter style using css steps() Animation typewriter style using css steps() Animation typewriter style using css steps()</p>
you can use this css child statements to break down your paragraph and continue it to next line..
.css-typing p {
margin-left: -20px;
color: black;
text-align: center;
border-right: .15em solid orange;
font-family: "monospace";
font-size: 2em;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
}
.css-typing p:nth-child(1) {
width: 400px;
-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: 400px;
opacity: 0;
-webkit-animation: type2 2s steps(40, end);
animation: type2 2s steps(40, end);
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.css-typing p:nth-child(3) {
width: 400;
opacity: 0;
-webkit-animation: type3 2s steps(40, end), blink .2s step-end infinite alternate;
animation: type3 2s steps(40, end), blink .2s step-end infinite alternate;
-webkit-animation-delay: 4s;
animation-delay: 4s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.css-typing p:nth-child(4) {
width: 400px;
opacity: 0;
-webkit-animation: type4 2s steps(40, end);
animation: type2 2s steps(40, end);
-webkit-animation-delay: 6s;
animation-delay: 6s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.css-typing p:nth-child(5) {
width: 400px;
opacity: 0;
-webkit-animation: type5 2s steps(40, end);
animation: type2 2s steps(40, end);
-webkit-animation-delay: 8s;
animation-delay: 8s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.css-typing p:nth-child(6) {
width: 400px;
opacity: 0;
-webkit-animation: type6 2s steps(40, end);
animation: type4 2s steps(40, end);
-webkit-animation-delay: 10s;
animation-delay: 10s;
-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;
}
99.9% {
border-right: .15em solid orange;
}
100% {
opacity: 1;
border: none;
}
}
#-webkit-keyframes type3 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: .15em solid orange;
}
100% {
opacity: 1;
border: none;
}
}
#keyframes type4 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: .15em solid orange;
}
100% {
opacity: 1;
border: none;
}
}
#-webkit-keyframes type4 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: .15em solid orange;
}
100% {
opacity: 1;
border: none;
}
}
#keyframes type5 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: .15em solid orange;
}
100% {
opacity: 1;
border: none;
}
}
#-webkit-keyframes type5 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: .15em solid orange;
}
100% {
opacity: 1;
border: none;
}
}
#keyframes type6 {
0% {
width: 0;
}
1% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes type6 {
0% {
width: 0;
}
1% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#keyframes blink {
50% {
border-color: transparent;
}
}
#-webkit-keyframes blink {
50% {
border-color: tranparent;
}
}
<div class="css-typing">
<p>
typewriter style
</p>
<p>
Animation typewriter
</p>
<p>
style using css
</p>
<p>
steps() Animationy
</p>
<p>
typewriter style using
</p>
<p>
css steps().
</p>
</div>
I'm developing a simple type of animation with CSS and HTML.
It works perfect on Mozilla, Opera and Chrome but in Microsoft Edge and IE browsers it is lagging.
Here is an example of my code:
.css-typing1 p {
border-right: 0.03em solid black;
color: black;
overflow: hidden;
white-space: nowrap;
margin: 0 auto;
letter-spacing: 2px;
font-size: 1em;
text-align: left;
}
.css-typing1 p:nth-child(1) {
width: 18em;
-webkit-animation: type 1.5s steps(40, end);
animation: type 1.5s steps(40, end), blink-caret .5s step-end infinite;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.css-typing1 p:nth-child(2) {
width: 18em;
opacity: 0;
-webkit-animation: type2 1.5s steps(40, end);
animation: type2 1.5s steps(40, end), blink-caret .5s step-end infinite;
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.css-typing1 p:nth-child(3) {
width: 18em;
opacity: 0;
-webkit-animation: type3 1.5s steps(40, end);
animation: type3 1.5s steps(40, end), blink-caret .5s step-end infinite;
-webkit-animation-delay: 3s;
animation-delay: 3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#keyframes type2 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: 0.03em solid black;
}
100% {
opacity: 1;
border: 0;
}
}
#-webkit-keyframes type2 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: 0.03em solid black;
}
100% {
opacity: 1;
border: 0;
}
}
#keyframes type3 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: 0.03em solid black;
}
100% {
opacity: 1;
/*border: none;*/
}
}
#-webkit-keyframes type3 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: 0.03em solid black;
}
100% {
opacity: 1;
/*border: none;*/
}
}
#keyframes blink-caret {
from,
to {
border-color: transparent
}
50% {
border-color: black
}
}
#keyframes type {
0% {
width: 0;
}
99.9% {
border-right: 0.03em solid black;
}
100% {
border: 0;
}
}
#-webkit-keyframes type {
0% {
width: 0;
}
99.9% {
border-right: 0.03em solid black;
}
100% {
border: 0;
}
}
<div class="css-typing1">
<p>
Some text for row number 1
</p>
<p>
Some text for row number 2
</p>
<p>
Some text for row number 3
</p>
</div>
As you can see from this example when the first row animation is finished, it shows the second row for a millisecond, then this second row disappears and starts typing as needed. The same for the third row.
How can I adjust my code so it won't show the second and the third row for this millisecond?
I am learning how to implement a typing effect for multi lines using only pure CSS, but I am having some difficulties.
1) The blinking caret doesn't stop right after the words have been typed. It just continues on until the end of the div.
2) How to remove the first blinking caret after it finished?
.typing h1 {
white-space: nowrap;
overflow: hidden;
letter-spacing: 0.5em;
border-right: 1px solid orange;
animation: typing 4s steps(40, end), blink-caret 0.75s step-end infinite;
}
.typing h1:nth-child(2) {
opacity: 0;
animation: typing2 4s steps(40, end), blink-caret 0.75s step-end infinite;
animation-delay: 4.5s;
animation-fill-mode: forwards;
}
#keyframes typing {
from {
width: 0;
}
to {
width: 100%
}
}
#keyframes typing2 {
from {
width: 0;
opacity: 1;
}
to {
width: 100%;
opacity: 1;
}
}
/* The typewriter cursor effect */
#keyframes blink-caret {
from,
to {
border-color: transparent;
}
50% {
border-color: orange;
}
}
<div class="typing">
<h1>First Line</h1>
<h1>Second Line</h1>
</div>