Jump to content

Fade out of text, and stay hidden - and looped

Recommended Posts

Site URL: https://lobster-ray-g42d.squarespace.com/fragrance

Hello

I am using the code  below to animate some text (in a code block) to fade out over a time period.

I then want:

  1. for the text to remain hidden once it had faded away until the end of the video (41s long)
  2. for it to loop back to the beginning again when the video starts again, and fade in and then fade back out, in continuum.

Is there a way to build that into the coding?

Thank you!

Louisa

 

 

#block-yui_3_17_2_1_1655285596647_6593 {.fade-out {
  animation: fadeOut ease 35s;
  -webkit-animation: fadeOut ease 35s;
  -moz-animation: fadeOut ease 35s;
  -o-animation: fadeOut ease 35s;
  -ms-animation: fadeOut ease 35s;
  letter-spacing: 2px;
  font-family: 'BreweryProMedium' !important;
  font-size: 24px !important;
  text-align: center;
}
}

@keyframes fadeOut {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

@-moz-keyframes fadeOut {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

@-webkit-keyframes fadeOut {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

@-o-keyframes fadeOut {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

@-ms-keyframes fadeOut {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
  }

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

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Just now, LV-OZ said:

Site URL: https://lobster-ray-g42d.squarespace.com/fragrance

Hello

I am using the code  below to animate some text (in a code block) to fade out over a time period.

I then want:

  1. for the text to remain hidden once it had faded away until the end of the video (41s long)
  2. for it to loop back to the beginning again when the video starts again, and fade in and then fade back out, in continuum.

Is there a way to build that into the coding?

Thank you!

Louisa

 

 

#block-yui_3_17_2_1_1655285596647_6593 {.fade-out {
  animation: fadeOut ease 35s;
  -webkit-animation: fadeOut ease 35s;
  -moz-animation: fadeOut ease 35s;
  -o-animation: fadeOut ease 35s;
  -ms-animation: fadeOut ease 35s;
  letter-spacing: 2px;
  font-family: 'BreweryProMedium' !important;
  font-size: 24px !important;
  text-align: center;
}
}

@keyframes fadeOut {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

@-moz-keyframes fadeOut {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

@-webkit-keyframes fadeOut {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

@-o-keyframes fadeOut {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

@-ms-keyframes fadeOut {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
  }

image.thumb.png.416692e9b3edf56c88acb697a9c24952.png

Link to comment
  • 1 year later...
On 12/11/2023 at 7:04 PM, TomMog said:

Hello - I am trying to achieve exactly the same thing on a site I am designing. I have never added CSS code before. Can I use the code in this thread? Or do you know someone I can commission to do it for me? 

Many thanks, 

 

Tom

Can you share link to your page, we can check & adjust code easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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.