Viewing 2 posts - 1 through 2 (of 2 total)
-
AuthorPosts
-
September 12, 2018 at 3:44 pm #1008983
Hello support team,
I use the fade in effect of the columns / sections to fade in the content (text, etc.) and I like it very much.
But I would like to reduce the fade in time. How is it possible?
Thank you.September 13, 2018 at 8:04 am #1009261Hey Andreas_BS,
It depends on which animation you’re using. The default values are set in enfold/css/shortcodes.css:
#top.avia_transform .avia_start_delayed_animation.fade-in { -webkit-animation: avia-fadein 1.5s 1 ease-out; /* Safari 4+ */ animation: avia-fadein 1.5s 1 ease-out; /* IE 10+ */ opacity: 1; } #top.avia_transform .avia_start_delayed_animation.pop-up { -webkit-animation: avia_image_appear 0.5s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275); /* Safari 4+ */ animation: avia_image_appear 0.5s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275); /* IE 10+ */ opacity: 1; } #top.avia_transform .avia_start_delayed_animation.top-to-bottom { -webkit-animation: avia-ttb 0.8s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275); /* Safari 4+ */ animation: avia-ttb 0.8s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275); /* IE 10+ */ opacity: 1; } #top.avia_transform .avia_start_delayed_animation.bottom-to-top { -webkit-animation: avia-btt 0.8s 1 cubic-bezier(0.165, 0.840, 0.440, 1.000); /* Safari 4+ */ animation: avia-btt 0.8s 1 cubic-bezier(0.165, 0.840, 0.440, 1.000); /* IE 10+ */ opacity: 1; } #top.avia_transform .avia_start_delayed_animation.left-to-right { -webkit-animation: avia-ltr 0.8s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275); /* Safari 4+ */ animation: avia-ltr 0.8s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275); /* IE 10+ */ opacity: 1; } #top.avia_transform .avia_start_delayed_animation.right-to-left { -webkit-animation: avia-rtl 0.8s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275); /* Safari 4+ */ animation: avia-rtl 0.8s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275); /* IE 10+ */ opacity: 1; } #top.avia_transform .avia_start_delayed_animation.av-rotateIn { -webkit-animation: avia-rotateIn 0.8s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275); animation: avia-rotateIn 0.8s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275); opacity: 1; } #top.avia_transform .avia_start_delayed_animation.av-rotateInUpLeft { -webkit-animation: avia-rotateInUpLeft 0.8s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275); animation: avia-rotateInUpLeft 0.8s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275); opacity: 1; } #top.avia_transform .avia_start_delayed_animation.av-rotateInUpRight { -webkit-animation: avia-rotateInUpRight 0.8s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275); animation: avia-rotateInUpRight 0.8s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275); opacity: 1; }
Basically you can copy this code to your child theme and then replace the “s” values (i.e. 1.5s or 0.8s) in the code with different values. s stands for seconds – i.e. 0,8s translates to 800 milliseconds.
Best regards,
Peter -
AuthorPosts
Viewing 2 posts - 1 through 2 (of 2 total)
- You must be logged in to reply to this topic.