Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #190319

    Hello!

    For the slider caption, I would like to have a fading in effect instead of this little movement between title and content. I’ve came across
    opacity: 0;
    -webkit-transition: opacity 3s 0 ease-in-out;
    -moz-transition: opacity 3s 0 ease-in-out;
    -o-transition: opacity 3s 0 ease-in-out;
    -ms-transition: opacity 3s 0 ease-in-out;
    transition: opacity 3s 0 ease-in-out;

    Applied to the classes “.csstransitions .av_slideshow_full.avia-fade-slider .active-slide .avia-caption-content” and “.csstransitions .av_slideshow_full.avia-fade-slider .active-slide .avia-caption-title” but the effect shown is exactly the contrary of what expected: the box and text appear straight and then start to fade until disappearing. I know it’s not a theme issue, but I can’t see quite how to make it, to have the title and content appear slowly, fading from 0 to 1; any help would be very welcome…!

    Thank you in advance,
    Anne-Sophie

    #190783

    Hi,

    Can you post a link to your website please?

    Regards,
    Josue

    #190909

    Hi Josue!

    The site is under construction. In the following message you have a user and password to access. The slideshow is on the home page.
    Regards,

    Anne-Sophie

    • This reply was modified 10 years, 8 months ago by asdevargas.
    #190910
    This reply has been marked as private.
    #191241

    Hey!

    Add this code to the Quick CSS:

    @-moz-keyframes customanimation {
     0% { opacity: 0 }
     100% { opacity: 1 }
    }
    
    @-webkit-keyframes "customanimation" {
     0% { opacity: 0 }
     100% { opacity: 1 }
    }
    
    @keyframes customanimation {
     0% { opacity: 0 }
     100% { opacity: 1 }
    }
    
    .active-slide .slideshow_align_caption {
     -webkit-animation: customanimation 1s;
     -moz-animation: customanimation 1s;
     animation: customanimation 1s;
    }

    Cheers!
    Josue

    #191279

    Hi Josue,
    Wow, thank you sooo much for your time and the solution!! It looks exactly the way I wanted to have it :)
    Definitely, I wouldn’t have come across this by myself…

    Thank you again.
    Best regards,

    Anne-Sophie

    #191557

    You are welcome, glad we could help.

    Regards,
    Josue

Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Transition effect’ is closed to new replies.