Jump to content

Have Image fade in and fade out

Recommended Posts

https://okra-vanilla-n2tn.squarespace.com/ the password is 123

Right now the hero images fade in, is there a way to have number [1] Fade in, then fade out after 3 seconds, [2] fade in and then fade out after 3 seconds, etc the current code I am using is 

/// Speech bubble fade in HOME PAGE

#block-yui_3_17_2_1_1698099613340_5182 {

animation: fade-me-in .5s;

}

 

@keyframes fade-me-in {

  0% {opacity:0;}

  80% {opacity:0;}

  100% {opacity:1;}

}

#block-8222289d31284ba440d5 {

animation: fade-me-in 1.0s;

}

 

@keyframes fade-me-in {

  0% {opacity:0;}

  80% {opacity:0;}

  100% {opacity:1;}

}

#block-7b78518b2a6909733fe1 {

animation: fade-me-in 1.5s;

}

 

@keyframes fade-me-in {

  0% {opacity:0;}

  80% {opacity:0;}

  100% {opacity:1;}

}

#block-80d9bee9e28b6781a90a {

animation: fade-me-in 2.0s;

}

 

@keyframes fade-me-in {

  0% {opacity:0;}

  80% {opacity:0;}

  100% {opacity:1;}

}

 

thank you!

Screen Shot 2023-10-25 at 6.26.54 PM.png

Link to comment
  • Replies 3
  • Views 1.4k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

10 hours ago, tuanphan said:

Hi,

I see you figured it out?

Not yet! Right now they just fade in but what I want is that the conversation bubbles is there a way to have number [1] Fade in, then fade out after 3 seconds, [2] fade in and then fade out after 3 seconds, etc - does that make sense?

Link to comment
  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.