dave-h of Developer Code Snippets
12/16/2019 - 6:07 PM

Responsive Tabs Animation

This snippet worked nicely for me on LAVVAN (Industries page) It provides a very subtle but nice fade animation to the content.

Pulled from here: https://github.com/samsono/Easy-Responsive-Tabs-to-Accordion/issues/48

resp-tab-animation.css
content_copyfile_download
.resp-tab-content > * { opacity: 0; }
@-webkit-keyframes fadeIn {
      from { opacity: 0; }
        to { opacity: 1; }
}
@keyframes fadeIn {
      from { opacity: 0; }
        to { opacity: 1; }
}
.resp-tab-content.resp-tab-content-active > * {
	-webkit-animation: fadeIn 1s;
	animation: fadeIn 1s;
	opacity: 1;
}
.no-cssanimations .resp-tab-content > * { opacity: 1; }