CSS Animation doesn't work with inline display

Question

As the title says, my CSS Animation doesn't work properly with the display: inline property...What am I doing wrong here?

I have narrowed it down to this bit of css code provided below that is giving me the troubles. If I provide all the code, it would literally take forever to look through as it's quite lengthy - however, if you need more let me know.

Anyway, in the HTML part, I have the class navcontent with style="display: none;" which looks like this: <div id="all" class="navcontent" style="display: none;"></div>

I need that bit of html to be hidden as the navcontent class also acts as tabs that once you click upon, the data/content within will appear in a specific container that's fixed (which any tab clicked the data/content appears/disappears in the same specific container)...

So with that being said, I have also applied some animation to that specific container but am having troubles making the animation work with display: inline...

Without the display: inline, the animation works great, but if you click on another tab, the content that is supposed to appear - isn't there. So I guess you can say I'm in a catch22 situation...

With the display: inline, the animation doesn't work, BUT the tabs work and appear like they should.

CSS:

.navcontent ul {
  width: 554px;
  height: 299px;
  padding: 0;
  margin: 0;
  list-style: none;
    -moz-perspective: 400px;
    -webkit-perspective: 400px;
    -ms-perspective: 400px;
    -o-perspective: 400px;
    perspective: 400px;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 9997;
}
.navcontent ul li {
  width: 536px;
  height: 140px;
  margin: 5px auto 10px auto;
  /* display: inline; */ /* Issues - If display is off, works as intended but other tabs do not show up at all if clicked.  If display is enabled, animation doesn't work... */
    -moz-transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
  position: relative;
  z-index: 2;
}
.navcontent ul li:nth-child(odd) {
  background: rgba(204, 204, 204, 0.07);
    background: -moz-linear-gradient(transparent, rgba(204, 204, 204, 0.07));
    background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(204, 204, 204, 0.07)));
    background: -webkit-linear-gradient(transparent, rgba(204, 204, 204, 0.07));
    background: -o-linear-gradient(transparent, rgba(204, 204, 204, 0.07));
}

Any Ideas -or- thoughts?

UPDATE:

JS

$(function () {
    $('#options ul li a').on('click', function (e) {
        e.preventDefault();
        if ($(this).hasClass('active')) {
            return;
        } else {
            var currentitm = $('#options ul li a.active').attr('id');
            if (currentitm == 'division_all_link') {
                var currentlist = $('#division_all');
            }
            if (currentitm == 'division_latest_link') {
                var currentlist = $('#division_latest');
            }
            if (currentitm == 'division_featured_link') {
                var currentlist = $('#division_featured');
            }
            if (currentitm == 'division_popular_link') {
                var currentlist = $('#division_popular');
            }

            var newitm = $(this).attr('id');
            if (newitm == 'division_all_link') {
                var newlist = $('#division_all');
            }
            if (newitm == 'division_latest_link') {
                var newlist = $('#division_latest');
            }
            if (newitm == 'division_featured_link') {
                var newlist = $('#division_featured');
            }
            if (newitm == 'division_popular_link') {
                var newlist = $('#division_popular');
            }

            $('#options ul li a').removeClass('active');
            $(this).addClass('active');
            $(currentlist).fadeOut(320, function () {
                $(newlist).fadeIn(200);
            });
        }
    });
});

Answer 1

You cannot transform elements with display: inline; - use inline-block instead:

.navcontent ul li {
    display: inline-block;
   /* .. */
    transform: translateZ(0);
}

This is stated clearly in the related specification:

transformable element

A transformable element is an element in one of these categories:

an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption [CSS21]

an element in the SVG namespace and not governed by the CSS box model which has the attributes transform, ‘patternTransform‘ or gradientTransform [SVG11].

Note that atomic inline-level element is referring to inline-block