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>
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>
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 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 have a very simple animation that fades out and shrinks a div.
But the problem is that when the animation finishes it goes back to the start and stays there.
div {
background-color: red;
height: 80px;
}
.fade-out {
animation-name: fade-out;
animation-duration: 2s;
}
#keyframes fade-out {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 0; height: 0;}
}
<div class="fade-out">Style Test</div>
If you add animation-fill-mode: forwards; to your .fade-out rule it will fix your animation.
animation-fill-mode specifies how CSS rules should be applied before and after executing the animation. The default is none which means that before and after the animation is executed, it will not apply any of the animation styles. That's why you're seeing it revert to the pre-animation state.
forwards tells the browser to retain the styles from the last keyframe. That's what you're looking for.
See the MDN docs for more information.
div {
background-color: red;
height: 80px;
}
.fade-out {
animation-name: fade-out;
animation-duration: 2s;
animation-fill-mode: forwards;
}
#keyframes fade-out {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 0; height: 0;}
}
<div class="fade-out">Style Test</div>
Use animation-fill-mode property
.fade-out {
animation-name: fade-out;
animation-duration: 2s;
animation-fill-mode: forwards
}
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.