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>
Related
I am trying to get a multi-line typewriter effect on my site. I have the code below and it does work except it shows the text before the animation occurs. So while the first line is typing, the second shows below it. After the first line types out, then the second line disappears and types out. I feel like I must be missing something small. I am pretty new to coding.
/*copy and paste this into your CSS editor*/
.typewriter p {
white-space: nowrap;
overflow: hidden;
}
.typewriter p:nth-child(1) {
/*If you are having problems with text clipping change the width from 16em to a higher value*/
width: 16em;
animation: type 2s steps(40, end);
-webkit-animation-delay: 3s;
animation-delay: 1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.typewriter p:nth-child(2) {
/*If you are having problems with text clipping change the width from 13.5em to a higher value*/
width: 16em;
opacity: 0;
-webkit-animation: type2 5s steps(40, end);
animation: type2 2s steps(40, end);
-webkit-animation-delay: 3s;
animation-delay: 3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#keyframes type {
0% {
width: 0;
}
100% {
border: none;
}
}
#-webkit-keyframes type {
0% {
width: 0;
}
100% {
border: none;
}
}
#keyframes type2 {
0% {
width: 0;
}
1% {
opacity: 1;
}
100% {
opacity: 1;
border: none;
}
}
#-webkit-keyframes type2 {
0% {
width: 0;
}
1% {
opacity: 1;
}
100% {
opacity: 0;
border: none;
}
}
<div class="typewriter">
<p> Words have power.</p>
<p> We leverage that power for good.</p>
</div>
While I do not see exactly what is described in the question which says the second line shows, I see the first line showing for one second before the animation begins but the second line stays hidden until its turn for animating.
The main problem seems to be that the first line has a delay of one second and during that second its opacity is at the default setting, which is 1, so we see it briefly.
There are also some inconsistencies between the -webkit- prefixed version and the non prefixed version which this snippet alters so that the timings of both are the same.
/*copy and paste this into your CSS editor*/
.typewriter p {
white-space: nowrap;
overflow: hidden;
}
.typewriter p:nth-child(1) {
/*If you are having problems with text clipping change the width from 16em to a higher value*/
width: 16em;
animation: type 2s steps(40, end);
-webkit-animation-delay: 1s;
animation-delay: 1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
opacity: 0;
}
.typewriter p:nth-child(2) {
/*If you are having problems with text clipping change the width from 13.5em to a higher value*/
width: 16em;
opacity: 0;
-webkit-animation: type2 2s steps(40, end);
animation: type2 2s steps(40, end);
-webkit-animation-delay: 3s;
animation-delay: 3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#keyframes type {
0% {
width: 0;
opacity: 1;
}
100% {
border: none;
opacity: 1;
}
}
#-webkit-keyframes type {
0% {
width: 0;
opacity: 1;
}
100% {
border: none;
opacity: 1;
}
}
#keyframes type2 {
0% {
width: 0;
}
1% {
opacity: 1;
}
100% {
opacity: 1;
border: none;
}
}
#-webkit-keyframes type2 {
0% {
width: 0;
}
1% {
opacity: 1;
}
100% {
opacity: 1;
border: none;
}
}
<div class="typewriter">
<p> Words have power.</p>
<p> We leverage that power for good.</p>
</div>
My website has a simple CSS animation, and I want to have the animation start after two seconds. I tried using animation-delay but it isn't working. Please let me know what I'm doing wrong.
.type-animation {
box-shadow: .6em 0 0 #00CCC7;
overflow: hidden;
white-space: nowrap;
}
h1.type-animation {
width: 10ch;
animation-delay: 2s;
animation: cursor .5s step-end infinite alternate,
type 1.5s steps(10, end)
}
#keyframes type {
0% {
width: 0;
}
}
#keyframes cursor {
50% {
box-shadow: .6em 0 0 transparent;
}
}
<body>
<h1 class="type-animation">A Website.</h1>
</body>
You are overwriting your animation-delay: 2s; with the animation shorthand rule underneath.
Move the animation-delay after the animation rule like this:
h1.type-animation {
width: 10ch;
animation: cursor .5s step-end infinite alternate,
type 1.5s steps(10, end);
animation-delay: 2s;
}
and the delay will work, as you can see in this snippet:
.type-animation {
box-shadow: .6em 0 0 #00CCC7;
overflow: hidden;
white-space: nowrap;
}
h1.type-animation {
width: 10ch;
animation: cursor .5s step-end infinite alternate,
type 1.5s steps(10, end);
animation-delay: 2s;
}
#keyframes type {
0% {
width: 0;
}
}
#keyframes cursor {
50% {
box-shadow: .6em 0 0 transparent;
}
}
<body>
<h1 class="type-animation">A Website.</h1>
</body>
However my guess is that isn't the result you were looking for! I presume you also want the elements to be hidden until the animation starts.
These are the lines you need to add in the element itself:
h1.type-animation {
/* 1. Start with the element hidden */
visibility: hidden;
/* 2. This keeps it visible after the animation ends (when visibility is on in the last keyframe) */
animation-fill-mode: forwards;
}
... and in the keyframes:
#keyframes type {
0% {
/* 3. Turn visibility on when animation starts */
visibility: visible;
}
100% {
/* 4. This along animation-fill-mode will keep visibility after animation ENDS */
visibility: visible;
}
}
See it working:
.type-animation {
box-shadow: .6em 0 0 #00CCC7;
overflow: hidden;
white-space: nowrap;
}
h1.type-animation {
visibility: hidden;
width: 10ch;
animation: cursor .5s step-end infinite alternate,
type 3s steps(10, end);
animation-delay: 2s;
animation-fill-mode: forwards;
}
#keyframes type {
0% {
width: 0;
visibility: visible;
}
100%{
visibility: visible;
}
}
#keyframes cursor {
50% {
box-shadow: .6em 0 0 transparent;
}
}
<body>
<h1 class="type-animation"><span>A Website.</span></h1>
</body>
If you want to create a typing effect, the above mentioned code snippet method by you is not ideal and efficient.
Here's a typing effect code snippet with a 2s animation delay.
I have inserted a simple setTimeout function in javascript using which is triggered on loading the DOM so the text will not be visible beforehand but only after 2s when the animation is scheduled to start.
window.addEventListener('load',(event)=>{
const timer = document.querySelector('.type');
setTimeout(function(){
timer.style.opacity = 1;
},2000);
})
/* GLOBAL STYLES */
body {
background: #333;
padding-top: 5em;
display: flex;
justify-content: center;
}
/* DEMO-SPECIFIC STYLES */
.type{
color: #fff;
font-family: monospace;
overflow: hidden; /* Ensures the content is not revealed until the animation */
border-right: .15em solid orange; /* The typwriter cursor */
white-space: nowrap; /* Keeps the content on a single line */
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
letter-spacing: .15em; /* Adjust as needed */
animation:
typing 3.5s steps(30, end),
blink-caret .5s step-end infinite;
animation-delay: 2s;
opacity:0;
}
/* 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 }
}
<div class="typewriter">
<h1 class="type">A website.</h1>
</div>
I have the following CSS classes, and HTML code that implement a timed display:
.timedSuccessBox {
color: white;
background: #27ae60;
border-radius: 5px;
padding: 5px;
-moz-animation: inAndOut 5s ease-in forwards;
-webkit-animation: inAndOut 5s ease-in forwards;
animation: inAndOut 5s ease-in forwards;
}
#keyframes inAndOut {
0% {
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div class='timedSuccessBox'>That worked!</div>
Is it possible to continue only using CSS (no JS) and pass the duration of animation, currently hard coded to 5?
Ideally what I want is, if the invoking HTML code passes a duration, that will be used, else fallback to 5s.
Thanks.
You could override a custom property which is set to 5s by default
:root {
--duration: 5s;
}
.timedSuccessBox {
color: white;
background: #27ae60;
border-radius: 5px;
padding: 5px;
-moz-animation: inAndOut var(--duration) ease-in forwards;
-webkit-animation: inAndOut var(--duration) ease-in forwards;
animation: inAndOut var(--duration) ease-in forwards;
}
#keyframes inAndOut {
0% {
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div class='timedSuccessBox' style='--duration: 10s'>That worked!</div>
I think you could use that in html:
<div class='timedSuccessBox' style='animation-duration: 10s!important'>That worked!</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'm looking to add a blinking caret / cursor inside the form in a twitter bootstrap 3 site. There is a codepen for the html and css but I need help on where to add the code, if the code works with bootstrap? I'm new and eager to learn but I have browsed and browsed and got no results.
The codepen is here
http://codepen.io/ArtemGordinsky/pen/GnLBq
html
<span class="blinking-cursor">|</span>
css
.blinking-cursor {
font-weight: 100;
font-size: 30px;
color: #2E3D48;
-webkit-animation: 1s blink step-end infinite;
-moz-animation: 1s blink step-end infinite;
-ms-animation: 1s blink step-end infinite;
-o-animation: 1s blink step-end infinite;
animation: 1s blink step-end infinite;
}
#keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: black;
}
}
#-moz-keyframes blink {
from, to {
color: transparent;
}
50% {
color: black;
}
}
#-webkit-keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: black;
}
}
#-ms-keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: black;
}
}
#-o-keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: black;
}
}
Simply wrap the input and the blinking icon into a container, then position the blinking icon inside the input.
/* The container */
.input-container {
position: relative;
}
/* Ensure the font-size is the same as the blinking icon */
.input-container input {
border: 1px solid gray;
font-size: 30px;
padding:0 5px;
}
/* Position it where you want. Must be position: absolute! */
.input-container .blinking-cursor {
position: absolute;
left: 5px; /* The same as padding on the input */
}
/* This will hide the blinking cursor when the user clicks on the input */
.input-container input:focus + .blinking-cursor{
visibility: hidden;
}
/* The code below is from the codepen: http://codepen.io/ArtemGordinsky/pen/GnLBq */
.blinking-cursor {
font-weight: 100;
font-size: 30px;
color: #2E3D48;
-webkit-animation: 1s blink step-end infinite;
-moz-animation: 1s blink step-end infinite;
-ms-animation: 1s blink step-end infinite;
-o-animation: 1s blink step-end infinite;
animation: 1s blink step-end infinite;
}
#keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: black;
}
}
#-moz-keyframes blink {
from, to {
color: transparent;
}
50% {
color: black;
}
}
#-webkit-keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: black;
}
}
#-ms-keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: black;
}
}
#-o-keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: black;
}
}
<div class="input-container">
<input type="text">
<span class="blinking-cursor">|</span>
</div>
You may want to edit the styles further, but this will put you in the direction you're wanting to go.