Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
  • #833959

    Hi there,

    I have 3 different 1/1 columns on my website’s homepage, placed in a Color Section with a video background.
    I assigned a fade-in animation to each column but, since I’m using the preloader, when the page is displayed the animation has already happened.
    I would like to delay the animation start, like 5 seconds, in order to see it happening after the loading (in most cases the loading is lasting up to 3 seconds).
    Also each column as its own class (home-text-1, home-text-2, home-text-3). I would like to assign to each of them a different delay, so that the 1st text is showing, then the 2nd and finally the third.
    After reading some animation-related post here, I tried to use the following css but it happens that the content is shown without animation, then after 10 seconds the animation is played.

    .avia_transform .avia_start_delayed_animation.fade-in {
        animation-name: avia-fadein;
        animation-duration: 1.5s;
        animation-timing-function: ease-out;
        animation-delay: 10s;
        animation-iteration-count: 1;
        animation-direction: initial;
        animation-fill-mode: initial;
        animation-play-state: initial;

    Also I wasn’t able to target the custom classes (home-text-1, home-text-2, home-text-3) attached to each column.
    I tried with .home-text-1 .avia_transform .avia_start_delayed_animation.fade-in but it didn’t seem to work.

    Can you please help me to solve this issue?
    Thanks a lot!


    Hey Truemotionpictures,

    Unfortunately it would require quite some time and customization of the theme to achieve this, so I am sorry to tell you that this is not covered by our support. However if its really important for you to get this done, you can always hire a freelancer to do the job for you :)

    Best regards,


    Thank you Basilis,

    that’s a pity… I thought it would be something easy to do.
    Anyway could you please tell me which files to edit in order to change the default animations?


    Hi Basilis,

    I found a post here and (Purchase code hidden if logged out) /”>another one here which are touching the topic, providing some code to solve the issue.
    It seems not really true

    that this is is not covered by your support

    and probably I won’t need

    to hire a freelancer


    Now my question is: is that solution still actual?


    Hi Truemotionpictures,

    You can try to apply those solutions to see if they work for you.

    Best regards,





    Great, please let us know if you should need any further help on the topic.

    Best regards,


    Hi Rikard!
    Unfortunately the above mentioned solutions were not working in my case.
    I want to apply a delay only to some specific elements, not to all.
    I also tried creating a custom class and applying it to those elements

    .delay-5s {
        -webkit-animation-delay: 5s; /* Safari 4.0 - 8.0 */
        animation-delay: 5s;

    Strangely the animation starts ignoring the animation-delay and then it plays again at the delay time (see link below).
    Could you please help me with that?

    I also tried


    Hi Truemotionpictures,

    I just don’t see the 5s delay rule applied to the elements, so maybe the code does not apply to the elements that you would like?

    Best regards,


    Hi I solved it hiring a freelancer!
    Thank you anyway!




    Great, glad you got it fixed and thanks for letting us know. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,


    Hi Rikard,

    you can close it.



    Glad we were able to help, we will close this now. Thank you for using Enfold.

    Best regards,

Viewing 13 posts - 1 through 13 (of 13 total)

The topic ‘Column fade-in animation delay’ is closed to new replies.