Styjun

What was Captain Marvel supposed to do once she reached her destination?

Find the logic in first 2 statements to give the answer for the third statement

Where should I draw the line on follow up questions from previous employer

Did the Apollo Guidance Computer really use 60% of the world's ICs in 1963?

How do I get my neighbour to stop disturbing with loud music?

Was it illegal to blaspheme God in Antioch in 360.-410.?

What is the motivation behind designing a control stick that does not move?

Break down the phrase "shitsurei shinakereba naranaindesu"

Which is the correct version of Mussorgsky's Pictures at an Exhibition?

Eshet Chayil in the Tunisian service

In what language did Túrin converse with Mím?

Who declared the Last Alliance to be the "last" and why?

What caused the end of cybernetic implants?

Why is there no Disney logo in MCU movies?

Can authors email you PDFs of their textbook for free?

Is Borg adaptation only temporary?

Lob Logical Read and lob read-ahead reads in NCCI

What checks exist against overuse of presidential pardons in the USA?

How to investigate an unknown 1.5GB file named "sudo" in my Linux home directory?

Why doesn't Starship have four landing legs?

How can I improve my formal definitions

Why does Sauron not permit his followers to use his name?

'Horseshoes' for Deer?

Why do IR remotes influence AM radios?

Element with absolute positioning fails to be responsive

Retrieve the position (X,Y) of an HTML elementCreating a div element in jQueryHow to move an element into another element?How to center absolutely positioned element in div?How can I set the default value for an HTML <select> element?Click through div to underlying elementsHow do I remove the space between inline-block elements?Changing the color of an hr elementHow to center a “position: absolute” elementPosition absolute but relative to parent

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

0

1

I know there have been several questions on the subject but none of them quite answers my problem... I have 13 SVGs piled one over the other (I am using a JS script to make one appear and the other disappear, thus creating an "animation" effect where something moves from one position to the other) and I positioned them as absolute to have them piled. The problem is: I work on a 17" screen and when I look with screenfly what my page looks like on bigger screens (24"), my elements are not well positioned anymore.

I have already tried positioning it with all the units I knew of (px, %, vw/vh, em, rem) but none of this works for my case...

Here is a schematic HTML code:

<svg id="step1">Lots of stuff</svg>
<svg id="step2">Same here</svg>
.
.
.
<svg id="step13">Some more stuff</svg>

And here are the CSS rules I use:

#step1, #step2, #step3, #step4, #step5, #step6, #step7, #step8, #step9, #step10, #step11, #step12, #step13 
 position: absolute;
 top: 1vh;
 left: 8.5vw;
 margin: 0 auto;
 visibility: hidden; /*They are hidden by default and I use JS to make them visible alternatively.*/
 height: 150px;

Here is the webpage for the animation, the one I am talking about is the "Tetris" animation for mobile phones so maybe you'll have to resize your browser to see it well...

If anyone has an idea about how to make it responsively positioned, I'd be really thankful.

Benjamin

html css

share|improve this question

edited Mar 28 at 9:19

Benjamin Loubet

asked Mar 27 at 22:55

Benjamin LoubetBenjamin Loubet

1366 bronze badges

add a comment | 

0

1

I know there have been several questions on the subject but none of them quite answers my problem... I have 13 SVGs piled one over the other (I am using a JS script to make one appear and the other disappear, thus creating an "animation" effect where something moves from one position to the other) and I positioned them as absolute to have them piled. The problem is: I work on a 17" screen and when I look with screenfly what my page looks like on bigger screens (24"), my elements are not well positioned anymore.

I have already tried positioning it with all the units I knew of (px, %, vw/vh, em, rem) but none of this works for my case...

Here is a schematic HTML code:

<svg id="step1">Lots of stuff</svg>
<svg id="step2">Same here</svg>
.
.
.
<svg id="step13">Some more stuff</svg>

And here are the CSS rules I use:

#step1, #step2, #step3, #step4, #step5, #step6, #step7, #step8, #step9, #step10, #step11, #step12, #step13 
 position: absolute;
 top: 1vh;
 left: 8.5vw;
 margin: 0 auto;
 visibility: hidden; /*They are hidden by default and I use JS to make them visible alternatively.*/
 height: 150px;

Here is the webpage for the animation, the one I am talking about is the "Tetris" animation for mobile phones so maybe you'll have to resize your browser to see it well...

If anyone has an idea about how to make it responsively positioned, I'd be really thankful.

Benjamin

html css

share|improve this question

edited Mar 28 at 9:19

Benjamin Loubet

asked Mar 27 at 22:55

Benjamin LoubetBenjamin Loubet

1366 bronze badges

add a comment | 

I know there have been several questions on the subject but none of them quite answers my problem... I have 13 SVGs piled one over the other (I am using a JS script to make one appear and the other disappear, thus creating an "animation" effect where something moves from one position to the other) and I positioned them as absolute to have them piled. The problem is: I work on a 17" screen and when I look with screenfly what my page looks like on bigger screens (24"), my elements are not well positioned anymore.

I have already tried positioning it with all the units I knew of (px, %, vw/vh, em, rem) but none of this works for my case...

Here is a schematic HTML code:

<svg id="step1">Lots of stuff</svg>
<svg id="step2">Same here</svg>
.
.
.
<svg id="step13">Some more stuff</svg>

And here are the CSS rules I use:

#step1, #step2, #step3, #step4, #step5, #step6, #step7, #step8, #step9, #step10, #step11, #step12, #step13 
 position: absolute;
 top: 1vh;
 left: 8.5vw;
 margin: 0 auto;
 visibility: hidden; /*They are hidden by default and I use JS to make them visible alternatively.*/
 height: 150px;

Here is the webpage for the animation, the one I am talking about is the "Tetris" animation for mobile phones so maybe you'll have to resize your browser to see it well...

If anyone has an idea about how to make it responsively positioned, I'd be really thankful.

Benjamin

html css

share|improve this question

edited Mar 28 at 9:19

Benjamin Loubet

asked Mar 27 at 22:55

Benjamin LoubetBenjamin Loubet

1366 bronze badges

<svg id="step1">Lots of stuff</svg>
<svg id="step2">Same here</svg>
.
.
.
<svg id="step13">Some more stuff</svg>

#step1, #step2, #step3, #step4, #step5, #step6, #step7, #step8, #step9, #step10, #step11, #step12, #step13 
 position: absolute;
 top: 1vh;
 left: 8.5vw;
 margin: 0 auto;
 visibility: hidden; /*They are hidden by default and I use JS to make them visible alternatively.*/
 height: 150px;

share|improve this question

edited Mar 28 at 9:19

Benjamin Loubet

asked Mar 27 at 22:55

Benjamin LoubetBenjamin Loubet

1366 bronze badges

share|improve this question

edited Mar 28 at 9:19

Benjamin Loubet

asked Mar 27 at 22:55

Benjamin LoubetBenjamin Loubet

1366 bronze badges

asked Mar 27 at 22:55

Benjamin LoubetBenjamin Loubet

1366 bronze badges

asked Mar 27 at 22:55

Benjamin LoubetBenjamin Loubet

1366 bronze badges

2 Answers
2

active

oldest

votes

0

You can use media query to resolve responsive issue. Try this i hope it'll help you out. Thanks

@media only screen and (max-width: 768px) 
 .step 
 position: static;
 display: block;
 

.step 
 position: absolute;
 top: 1vh;
 left: 8.5vw;
 margin: 0 auto;
 visibility: hidden; /*They are hidden by default and I use JS to make them visible alternatively.*/
 height: 150px;


@media only screen and (max-width: 768px) 
 .step 
	position: static;
	display: block;
 

<svg class="step" id="step1">Lots of stuff</svg>
<svg class="step" id="step2">Same here</svg>
.
.
.
<svg class="step" id="step13">Some more stuff</svg>

share|improve this answer

edited Mar 27 at 23:28

answered Mar 27 at 23:23

Hassan SiddiquiHassan Siddiqui

2,03711 gold badge77 silver badges1515 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I will probably resolve to that but I was trying to avoid it because if I do it like that I will have to specify a lot of widths since my code isn't even responsive from one computer screen to another. But thank you for your help :) I will try it now and will put the questioned as solved if it works!
  
  – Benjamin Loubet
  Mar 28 at 19:16
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you @BenjaminLoubet for your feedback.
  
  – Hassan Siddiqui
  Mar 28 at 19:49
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Sorry for the late answer, I couldn't do it at the time I thought I would but now my element is responsive, thanks to you @HassanSiddiqui!
  
  – Benjamin Loubet
  Mar 30 at 22:46
  

  
  
  
  

add a comment | 

2

Have you looked at flexbox with a columnar direction? The items will stay vertically centered no matter the screen height. Also, I removed the ids, since they are no longer necessary.

const steps = document.querySelectorAll('.step');
let delay = .25;
steps.forEach(step => 
 step.style.animationDelay = `$delays`;
 delay += .25;
);

body 
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 min-height: 100vh;
 margin: 0;


.step 
 visibility: hidden;
 opacity: 0;
 border: 1px solid;
 animation-name: makeVisible;
 animation-duration: 1s;
 animation-fill-mode: forwards;
 padding: 1em;


@keyframes makeVisible 
 to 
 opacity: 1;
 visibility: visible;
 border-color: transparent;
 

<div class="step">One</div>
<div class="step">Two</div>
<div class="step">Three</div>
<div class="step">Four</div>
<div class="step">Five</div>

jsFiddle

share|improve this answer

edited Mar 28 at 8:50

answered Mar 27 at 23:04

Andy HoffmanAndy Hoffman

11.2k33 gold badges2020 silver badges4141 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Good suggestion but in future if step length increase we have to write animation-delay CSS for each step.
  
  – Hassan Siddiqui
  Mar 27 at 23:26
  
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  @HassanSiddiqui I adjusted my answer to grow dynamically with n elements via JavaScript.
  
  – Andy Hoffman
  Mar 27 at 23:38
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you very much for your help, however, it doesn't seem to work for vertical positioning... I will edit the question to provide the web page so that anyone can look
  
  – Benjamin Loubet
  Mar 28 at 9:16
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55387717%2felement-with-absolute-positioning-fails-to-be-responsive%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

You can use media query to resolve responsive issue. Try this i hope it'll help you out. Thanks

@media only screen and (max-width: 768px) 
 .step 
 position: static;
 display: block;
 

.step 
 position: absolute;
 top: 1vh;
 left: 8.5vw;
 margin: 0 auto;
 visibility: hidden; /*They are hidden by default and I use JS to make them visible alternatively.*/
 height: 150px;


@media only screen and (max-width: 768px) 
 .step 
	position: static;
	display: block;
 

<svg class="step" id="step1">Lots of stuff</svg>
<svg class="step" id="step2">Same here</svg>
.
.
.
<svg class="step" id="step13">Some more stuff</svg>

share|improve this answer

edited Mar 27 at 23:28

answered Mar 27 at 23:23

Hassan SiddiquiHassan Siddiqui

2,03711 gold badge77 silver badges1515 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I will probably resolve to that but I was trying to avoid it because if I do it like that I will have to specify a lot of widths since my code isn't even responsive from one computer screen to another. But thank you for your help :) I will try it now and will put the questioned as solved if it works!
  
  – Benjamin Loubet
  Mar 28 at 19:16
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you @BenjaminLoubet for your feedback.
  
  – Hassan Siddiqui
  Mar 28 at 19:49
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Sorry for the late answer, I couldn't do it at the time I thought I would but now my element is responsive, thanks to you @HassanSiddiqui!
  
  – Benjamin Loubet
  Mar 30 at 22:46
  

  
  
  
  

add a comment | 

0

You can use media query to resolve responsive issue. Try this i hope it'll help you out. Thanks

@media only screen and (max-width: 768px) 
 .step 
 position: static;
 display: block;
 

.step 
 position: absolute;
 top: 1vh;
 left: 8.5vw;
 margin: 0 auto;
 visibility: hidden; /*They are hidden by default and I use JS to make them visible alternatively.*/
 height: 150px;


@media only screen and (max-width: 768px) 
 .step 
	position: static;
	display: block;
 

<svg class="step" id="step1">Lots of stuff</svg>
<svg class="step" id="step2">Same here</svg>
.
.
.
<svg class="step" id="step13">Some more stuff</svg>

share|improve this answer

edited Mar 27 at 23:28

answered Mar 27 at 23:23

Hassan SiddiquiHassan Siddiqui

2,03711 gold badge77 silver badges1515 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I will probably resolve to that but I was trying to avoid it because if I do it like that I will have to specify a lot of widths since my code isn't even responsive from one computer screen to another. But thank you for your help :) I will try it now and will put the questioned as solved if it works!
  
  – Benjamin Loubet
  Mar 28 at 19:16
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you @BenjaminLoubet for your feedback.
  
  – Hassan Siddiqui
  Mar 28 at 19:49
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Sorry for the late answer, I couldn't do it at the time I thought I would but now my element is responsive, thanks to you @HassanSiddiqui!
  
  – Benjamin Loubet
  Mar 30 at 22:46
  

  
  
  
  

add a comment | 

You can use media query to resolve responsive issue. Try this i hope it'll help you out. Thanks

@media only screen and (max-width: 768px) 
 .step 
 position: static;
 display: block;
 

.step 
 position: absolute;
 top: 1vh;
 left: 8.5vw;
 margin: 0 auto;
 visibility: hidden; /*They are hidden by default and I use JS to make them visible alternatively.*/
 height: 150px;


@media only screen and (max-width: 768px) 
 .step 
	position: static;
	display: block;
 

<svg class="step" id="step1">Lots of stuff</svg>
<svg class="step" id="step2">Same here</svg>
.
.
.
<svg class="step" id="step13">Some more stuff</svg>

share|improve this answer

edited Mar 27 at 23:28

answered Mar 27 at 23:23

Hassan SiddiquiHassan Siddiqui

2,03711 gold badge77 silver badges1515 bronze badges

@media only screen and (max-width: 768px) 
 .step 
 position: static;
 display: block;
 

.step 
 position: absolute;
 top: 1vh;
 left: 8.5vw;
 margin: 0 auto;
 visibility: hidden; /*They are hidden by default and I use JS to make them visible alternatively.*/
 height: 150px;


@media only screen and (max-width: 768px) 
 .step 
	position: static;
	display: block;
 

<svg class="step" id="step1">Lots of stuff</svg>
<svg class="step" id="step2">Same here</svg>
.
.
.
<svg class="step" id="step13">Some more stuff</svg>

.step 
 position: absolute;
 top: 1vh;
 left: 8.5vw;
 margin: 0 auto;
 visibility: hidden; /*They are hidden by default and I use JS to make them visible alternatively.*/
 height: 150px;


@media only screen and (max-width: 768px) 
 .step 
	position: static;
	display: block;
 

<svg class="step" id="step1">Lots of stuff</svg>
<svg class="step" id="step2">Same here</svg>
.
.
.
<svg class="step" id="step13">Some more stuff</svg>

.step 
 position: absolute;
 top: 1vh;
 left: 8.5vw;
 margin: 0 auto;
 visibility: hidden; /*They are hidden by default and I use JS to make them visible alternatively.*/
 height: 150px;


@media only screen and (max-width: 768px) 
 .step 
	position: static;
	display: block;
 

<svg class="step" id="step1">Lots of stuff</svg>
<svg class="step" id="step2">Same here</svg>
.
.
.
<svg class="step" id="step13">Some more stuff</svg>

share|improve this answer

edited Mar 27 at 23:28

answered Mar 27 at 23:23

Hassan SiddiquiHassan Siddiqui

2,03711 gold badge77 silver badges1515 bronze badges

answered Mar 27 at 23:23

Hassan SiddiquiHassan Siddiqui

2,03711 gold badge77 silver badges1515 bronze badges

answered Mar 27 at 23:23

Hassan SiddiquiHassan Siddiqui

2,03711 gold badge77 silver badges1515 bronze badges

2

Have you looked at flexbox with a columnar direction? The items will stay vertically centered no matter the screen height. Also, I removed the ids, since they are no longer necessary.

const steps = document.querySelectorAll('.step');
let delay = .25;
steps.forEach(step => 
 step.style.animationDelay = `$delays`;
 delay += .25;
);

body 
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 min-height: 100vh;
 margin: 0;


.step 
 visibility: hidden;
 opacity: 0;
 border: 1px solid;
 animation-name: makeVisible;
 animation-duration: 1s;
 animation-fill-mode: forwards;
 padding: 1em;


@keyframes makeVisible 
 to 
 opacity: 1;
 visibility: visible;
 border-color: transparent;
 

<div class="step">One</div>
<div class="step">Two</div>
<div class="step">Three</div>
<div class="step">Four</div>
<div class="step">Five</div>

jsFiddle

share|improve this answer

edited Mar 28 at 8:50

answered Mar 27 at 23:04

Andy HoffmanAndy Hoffman

11.2k33 gold badges2020 silver badges4141 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Good suggestion but in future if step length increase we have to write animation-delay CSS for each step.
  
  – Hassan Siddiqui
  Mar 27 at 23:26
  
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  @HassanSiddiqui I adjusted my answer to grow dynamically with n elements via JavaScript.
  
  – Andy Hoffman
  Mar 27 at 23:38
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you very much for your help, however, it doesn't seem to work for vertical positioning... I will edit the question to provide the web page so that anyone can look
  
  – Benjamin Loubet
  Mar 28 at 9:16
  

  
  
  
  

add a comment | 

2

Have you looked at flexbox with a columnar direction? The items will stay vertically centered no matter the screen height. Also, I removed the ids, since they are no longer necessary.

const steps = document.querySelectorAll('.step');
let delay = .25;
steps.forEach(step => 
 step.style.animationDelay = `$delays`;
 delay += .25;
);

body 
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 min-height: 100vh;
 margin: 0;


.step 
 visibility: hidden;
 opacity: 0;
 border: 1px solid;
 animation-name: makeVisible;
 animation-duration: 1s;
 animation-fill-mode: forwards;
 padding: 1em;


@keyframes makeVisible 
 to 
 opacity: 1;
 visibility: visible;
 border-color: transparent;
 

<div class="step">One</div>
<div class="step">Two</div>
<div class="step">Three</div>
<div class="step">Four</div>
<div class="step">Five</div>

jsFiddle

share|improve this answer

edited Mar 28 at 8:50

answered Mar 27 at 23:04

Andy HoffmanAndy Hoffman

11.2k33 gold badges2020 silver badges4141 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Good suggestion but in future if step length increase we have to write animation-delay CSS for each step.
  
  – Hassan Siddiqui
  Mar 27 at 23:26
  
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  @HassanSiddiqui I adjusted my answer to grow dynamically with n elements via JavaScript.
  
  – Andy Hoffman
  Mar 27 at 23:38
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you very much for your help, however, it doesn't seem to work for vertical positioning... I will edit the question to provide the web page so that anyone can look
  
  – Benjamin Loubet
  Mar 28 at 9:16
  

  
  
  
  

add a comment | 

Have you looked at flexbox with a columnar direction? The items will stay vertically centered no matter the screen height. Also, I removed the ids, since they are no longer necessary.

const steps = document.querySelectorAll('.step');
let delay = .25;
steps.forEach(step => 
 step.style.animationDelay = `$delays`;
 delay += .25;
);

body 
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 min-height: 100vh;
 margin: 0;


.step 
 visibility: hidden;
 opacity: 0;
 border: 1px solid;
 animation-name: makeVisible;
 animation-duration: 1s;
 animation-fill-mode: forwards;
 padding: 1em;


@keyframes makeVisible 
 to 
 opacity: 1;
 visibility: visible;
 border-color: transparent;
 

<div class="step">One</div>
<div class="step">Two</div>
<div class="step">Three</div>
<div class="step">Four</div>
<div class="step">Five</div>

jsFiddle

share|improve this answer

edited Mar 28 at 8:50

answered Mar 27 at 23:04

Andy HoffmanAndy Hoffman

11.2k33 gold badges2020 silver badges4141 bronze badges

const steps = document.querySelectorAll('.step');
let delay = .25;
steps.forEach(step => 
 step.style.animationDelay = `$delays`;
 delay += .25;
);

body 
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 min-height: 100vh;
 margin: 0;


.step 
 visibility: hidden;
 opacity: 0;
 border: 1px solid;
 animation-name: makeVisible;
 animation-duration: 1s;
 animation-fill-mode: forwards;
 padding: 1em;


@keyframes makeVisible 
 to 
 opacity: 1;
 visibility: visible;
 border-color: transparent;
 

<div class="step">One</div>
<div class="step">Two</div>
<div class="step">Three</div>
<div class="step">Four</div>
<div class="step">Five</div>

const steps = document.querySelectorAll('.step');
let delay = .25;
steps.forEach(step => 
 step.style.animationDelay = `$delays`;
 delay += .25;
);

body 
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 min-height: 100vh;
 margin: 0;


.step 
 visibility: hidden;
 opacity: 0;
 border: 1px solid;
 animation-name: makeVisible;
 animation-duration: 1s;
 animation-fill-mode: forwards;
 padding: 1em;


@keyframes makeVisible 
 to 
 opacity: 1;
 visibility: visible;
 border-color: transparent;
 

<div class="step">One</div>
<div class="step">Two</div>
<div class="step">Three</div>
<div class="step">Four</div>
<div class="step">Five</div>

const steps = document.querySelectorAll('.step');
let delay = .25;
steps.forEach(step => 
 step.style.animationDelay = `$delays`;
 delay += .25;
);

body 
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 min-height: 100vh;
 margin: 0;


.step 
 visibility: hidden;
 opacity: 0;
 border: 1px solid;
 animation-name: makeVisible;
 animation-duration: 1s;
 animation-fill-mode: forwards;
 padding: 1em;


@keyframes makeVisible 
 to 
 opacity: 1;
 visibility: visible;
 border-color: transparent;
 

<div class="step">One</div>
<div class="step">Two</div>
<div class="step">Three</div>
<div class="step">Four</div>
<div class="step">Five</div>

share|improve this answer

edited Mar 28 at 8:50

answered Mar 27 at 23:04

Andy HoffmanAndy Hoffman

11.2k33 gold badges2020 silver badges4141 bronze badges

answered Mar 27 at 23:04

Andy HoffmanAndy Hoffman

11.2k33 gold badges2020 silver badges4141 bronze badges

answered Mar 27 at 23:04

Andy HoffmanAndy Hoffman

11.2k33 gold badges2020 silver badges4141 bronze badges