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>
so i want to fade in letter by letter using only css.
:root {
--delay: 1;
}
#welcomemsg span {
visibility: hidden;
}
#welcomemsg span:nth-of-type(n+1) {
animation: type 0s ease-in var(--delay)s;
animation-fill-mode: forwards;
--delay: calc(var(--delay) + 1);
}
#keyframes type {
to {
visibility: unset;
}
}
<div id="welcomemsg">
<span>H</span><span>e</span><span>y</span><span>!</span>
</div>
I did some research and found out that this couldnt work bc the delay would be inside an loop so :nth-of-type(1) delay would be infinite. Is there an way to get this working without doing all nth-of-types by hand ? It would be so cool to do this without creating an css mess.
Here you go...
#welcomemsg {
color: red;
font-family: "Courier";
font-size: 20px;
margin: 10px 0 0 10px;
white-space: nowrap;
overflow: hidden;
width: 30em;
animation: type 20s steps(50, end);
}
#keyframes type {
from {
width: 0;
}
}
<div id="welcomemsg">
<span>H</span><span>e</span><span>y</span><span>!</span>
</div>
UPDATE
span {
font-size: 30px;
opacity: 0;
}
span:nth-child(1) {
animation: type 1s forwards 0s;
}
span:nth-child(2) {
animation: type 1s forwards 0.5s;
}
span:nth-child(3) {
animation: type 1s forwards 1s;
}
span:nth-child(4) {
animation: type 1s forwards 1.5s;
}
#keyframes type {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div id="welcomemsg">
<span>H</span><span>e</span><span>y</span><span>!</span>
</div>
I have animation:
#-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-moz-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#animation1 {
height: 100px;
width: 100px;
background: pink;
opacity: 0;
-webkit-animation: fadein 2s ease-in alternate;
-moz-animation: fadein 2s ease-in alternate;
animation: fadein 2s ease-in alternate;
animation-delay: 2s;
}
<div id="animation1"></div>
I would like to have a hidden element by 2 seconds and show it, but this element disappears after animation. When I remove opacity 0, element is visable earlier than it should. How to do it?
You can use animation-fill-mode: forwards
#-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-moz-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#animation1 {
height: 100px;
width: 100px;
background: pink;
opacity: 0;
-webkit-animation: fadein 2s ease-in alternate;
-moz-animation: fadein 2s ease-in alternate;
animation: fadein 2s ease-in alternate;
animation-delay: 2s;
animation-fill-mode: forwards;
}
<div id="animation1"></div>
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>
I really want to make a piece of text blink the old-school style without using javascript or text-decoration.
No transitions, only *blink*, *blink*, *blink*!
This is different from that question because I ask for blinking without continuous transitions, whereas OP of the other questions asks how to replace blinking with continuous transitions
The original Netscape <blink> had an 80% duty cycle. This comes pretty close, although the real <blink> only affects text:
.blink {
animation: blink-animation 1s steps(5, start) infinite;
-webkit-animation: blink-animation 1s steps(5, start) infinite;
}
#keyframes blink-animation {
to {
visibility: hidden;
}
}
#-webkit-keyframes blink-animation {
to {
visibility: hidden;
}
}
This is <span class="blink">blinking</span> text.
You can find more info about Keyframe Animations here.
Let me show you a little trick.
As Arkanciscan said, you can use CSS3 transitions. But his solution looks different from the original tag.
What you really need to do is this:
#keyframes blink {
50% {
opacity: 0.0;
}
}
.blink {
animation: blink 1s step-start 0s infinite;
}
<span class="blink">Blink</span>
JSfiddle Demo
Try this CSS
#keyframes blink {
0% { color: red; }
100% { color: black; }
}
#-webkit-keyframes blink {
0% { color: red; }
100% { color: black; }
}
.blink {
-webkit-animation: blink 1s linear infinite;
-moz-animation: blink 1s linear infinite;
animation: blink 1s linear infinite;
}
This is <span class="blink">blink</span>
You need browser/vendor specific prefixes: http://jsfiddle.net/es6e6/1/.
There's actually no need for visibility or opacity - you can simply use color, which has the upside of keeping any "blinking" to the text only:
blink {
display: inline;
color: inherit;
animation: blink 1s steps(1) infinite;
-webkit-animation: blink 1s steps(1) infinite;
}
#keyframes blink { 50% { color: transparent; } }
#-webkit-keyframes blink { 50% { color: transparent; } }
Here is some text, <blink>this text will blink</blink>, this will not.
Fiddle: http://jsfiddle.net/2r8JL/
I'm going to hell for this :
=keyframes($name)
#-webkit-keyframes #{$name}
#content
#-moz-keyframes #{$name}
#content
#-ms-keyframes #{$name}
#content
#keyframes #{$name}
#content
+keyframes(blink)
25%
zoom: 1
opacity: 1
65%
opacity: 1
66%
opacity: 0
100%
opacity: 0
body
font-family: sans-serif
font-size: 4em
background: #222
text-align: center
.blink
color: rgba(#fff, 0.9)
+animation(blink 1s 0s reverse infinite)
+transform(translateZ(0))
.table
display: table
height: 5em
width: 100%
vertical-align: middle
.cell
display: table-cell
width: 100%
height: 100%
vertical-align: middle
http://codepen.io/anon/pen/kaGxC (sass with bourbon)
Another variation
.blink {
-webkit-animation: blink 1s step-end infinite;
animation: blink 1s step-end infinite;
}
#-webkit-keyframes blink { 50% { visibility: hidden; }}
#keyframes blink { 50% { visibility: hidden; }}
This is <span class="blink">blink</span>
If you want smooth blinking text or something a like you can use following code:
.blinking {
-webkit-animation: 1s blink ease infinite;
-moz-animation: 1s blink ease infinite;
-ms-animation: 1s blink ease infinite;
-o-animation: 1s blink ease infinite;
animation: 1s blink ease infinite;
}
#keyframes "blink" {
from,
to {
opacity: 0;
}
50% {
opacity: 1;
}
}
#-moz-keyframes blink {
from,
to {
opacity: 0;
}
50% {
opacity: 1;
}
}
#-webkit-keyframes "blink" {
from,
to {
opacity: 0;
}
50% {
opacity: 1;
}
}
#-ms-keyframes "blink" {
from,
to {
opacity: 0;
}
50% {
opacity: 1;
}
}
#-o-keyframes "blink" {
from,
to {
opacity: 0;
}
50% {
opacity: 1;
}
}
<span class="blinking">I am smoothly blinking</span>
It's working in my case blinking text at 1s interval.
.blink_me {
color:#e91e63;
font-size:140%;
font-weight:bold;
padding:0 20px 0 0;
animation: blinker 1s linear infinite;
}
#keyframes blinker {
50% { opacity: 0.4; }
}
if you want some glow effect use this
#keyframes blink {
50% {
opacity: 0.0;
}
}
#-webkit-keyframes blink {
50% {
opacity: 0.0;
}
}
atom-text-editor::shadow .bracket-matcher .region {
border:none;
background-color: rgba(195,195,255,0.1);
border-bottom: 1px solid rgb(155,155,255);
box-shadow: 0px 0px 9px 4px rgba(155,155,255,0.1);
border-radius: 3px;
animation: blink 2s steps(115, start) infinite;
-webkit-animation: blink 2s steps(115, start) infinite;
}
Please find below solution for your code.
#keyframes blink {
50% {
color: transparent;
}
}
.loader__dot {
animation: 1s blink infinite;
}
.loader__dot:nth-child(2) {
animation-delay: 250ms;
}
.loader__dot:nth-child(3) {
animation-delay: 500ms;
}
Loading <span class="loader__dot">.</span><span class="loader__dot">.</span><span class="loader__dot">.</span>