Fade out of text, and stay hidden - and looped

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;
  }
  }

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;
  }
  }