Make a certain image have an extra long Fade-In

I want to make just the SHAKERMAKER logo on the homepage have a 5 second fade in. Please let me know what I need to add into the Custom CSS. Thank you!

website: shakermaker.online

Hi @marchbank, try this:

/* Transition Animation Application */
.fe-block-yui_3_17_2_1_1686276277987_84481 {
-webkit-animation: fadeIn 5s linear 0s forwards; // animation name, duration, timing-function, delay, direction
        animation: fadeIn 5s linear 0s forwards;
  opacity: 0;
}
@-webkit-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}
@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

You can adjust the animation properties (on both lines) if you'd like to change the duration or add in a delay

Worked great ! Thank you Maya

Quick question tho - If I wanted it to wait one second before first appearing is there a way to delay the animation slightly before the fade it? Thank you!

11 minutes ago, marchbank said:

Quick question tho - If I wanted it to wait one second before first appearing is there a way to delay the animation slightly before the fade it? Thank you!

Absolutely! If you take note of the animation property, I included the syntax rules:

// animation name, duration, timing-function, delay, direction

Following that order, you can adjust what currently is set to "0s" to your preferred delay time. Let me know how that works!

Amazing! Worked like a charm