Site logo

[Resolved] background animation

Home Forums Support [Resolved] background animation

Home Forums Support background animation

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2455769
    Richard

    Hello,

    I’m attempting to add a fadein animation on this background. Can you help?

    Thanks
    Rich

    #2455836
    David
    Staff
    Customer Support

    Hi there,

    first thing you will need to do is to edit that Container Block, and change Background type to Pseudo Element.
    This will move the background to a pseudo element that can be styled separately.

    If you make that change then we can take a lot at the animation.

    #2455866
    Richard

    Thanks David. I’ve updated the Container Block to a Pseudo element now.

    #2456115
    David
    Staff
    Customer Support

    Now:

    1. Add this CSS to your site:

    
    .has-fade-in {
        animation: fadein 2s;
    }
    
    @keyframes fadein {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    2. Edit that Container block again and in Advanced > Additional CSS Class(es) add: has-fade-in

    #2456136
    Richard

    Perfect! thanks David.

    #2456169
    David
    Staff
    Customer Support

    You’re welcome

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.