Tagged: ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • November 18, 2013 at 10:00 pm #190319
    asdevargas

    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

    November 20, 2013 at 2:24 am #190783
    Josue

    Hi,

    Can you post a link to your website please?

    Regards,
    Josue

    November 20, 2013 at 1:24 pm #190909
    asdevargas

    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 11 years ago by asdevargas.
    November 20, 2013 at 1:25 pm #190910
    asdevargas
    This reply has been marked as private.
    November 21, 2013 at 2:27 am #191241
    Josue

    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

    November 21, 2013 at 3:22 am #191279
    asdevargas

    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

    November 21, 2013 at 6:50 pm #191557
    Josue

    You are welcome, glad we could help.

    Regards,
    Josue

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