Jump to content

Make a certain image have an extra long Fade-In

Recommended Posts

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

Link to comment
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!

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.