Problem with css animation: position relative and value for left doesn't work apparently together

Question

Here's my problem:

I'm trying to animate a nav list (ul) and in my mind, I want to move it on click like that:

 $('#top-nav-more').click(function() { $('.hidden').toggleClass('hidden-click'); $(this).find('img').toggleClass('rotate'); }); 

 /** Top Nav **/ #top-nav { background: #e41a2e; padding:0 !important; display: inline-block; /*height:40px;*/ } .top-nav-wrapper{ max-width:1366px; margin: 0 auto; } a.top-req-info{ position: absolute; font-family: 'Daxline Light'; font-size: 0.80rem; color: #FFF; background: #cd1729; padding: 10px 20px 11px 10px; /* float: left; */ } a.top-req-info:hover, #top-nav-book a:hover, .hidden a:hover { text-decoration:none; color: #821b31; } a.top-req-info:hover, #top-nav-book:hover { background: #821b31; color: white; } #top-nav-book:hover a { color: white; } #top-nav-more a, #top-nav-no a, #top-nav-book a, .hidden a { color: #FFF; font-size: 0.80rem; } .rotate { transform: rotate(180deg); } ul.top-nav-right{ list-style: none; float: right; display: inline; margin: 7px 0; } ul.top-nav-right li{ display:inline; padding: 8px 25px 8px; } li#top-nav-more{ background: #cd1729; } #top-nav-more img{ margin-right: 15px; transition: 0.3s; } .hidden { position: relative; left: 321px; display: none!important; transition:all 1s linear; } .hidden-click { transition:all 1s linear; position: relative; left: 0; display: inline!important; } ul .hidden:first-child { display: inline!important; left: 0; } .search-bar input { background-color: #821A31; color: #ffff; font-size: 35px; border: 0; margin: 0; height: 76px; width: 100%; padding: 0 80px; font-weight: 200; display: none; } .search-bar input:focus, .search-bar input:focus{ outline: none; } .search-bar input.slide-down { display: block; } .search-bar input::placeholder { color: white; } .hover-bar { background: #821A31!important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Top Navigation -- Red bar --> <div id="top-nav" class="container-fluid"> <div class="top-nav-wrapper"> <ul class="top-nav-right"> <li class="hidden"><a href="">Health Care</a></li> <li class="hidden"><a href="">My Account</a></li> <li class="hidden"><a href="">Student Portal</a></li> <li id="top-nav-more"><a href="#">More</a></li> <li id="top-nav-no"><a href="#">Phone number</a></li> <li id="top-nav-book"><a href="#">Book a Tour</a></li> </ul> </div> </div> 

Essentially, when you click more, the bar will change the position from some certain pixels to the left to 0 pixels on the left.

I added the transition effect to do it smoothly but for some reason, the effect happens right away. So technically it works but it doesn't work as I wish.

Something has to be wrong on my css transition. I read that it is possible to animate the position, so it is not a problem of position, it has to be something different. I've already use the property transition somewhere else in my code, so I have no clue of what is wrong, any idea?

Answer 1

This might get you close. I imagine there might be more to the animation you're looking for. It's hard to manipulate elements that are set to display none. Visibility: hidden and position: absolute is an equivalent you can manipulate:

/** Top Nav **/
#top-nav {
    background: #e41a2e;
    padding:0 !important;
    display: inline-block;
    /*height:40px;*/
}

.top-nav-wrapper{
    max-width:1366px;
    margin: 0 auto;
}

a.top-req-info{
    position: absolute;
    font-family: 'Daxline Light';
    font-size: 0.80rem;
    color: #FFF;
    background: #cd1729;
    padding: 10px 20px 11px 10px;
    /* float: left; */
}

a.top-req-info:hover, #top-nav-book a:hover, .hidden a:hover {
    text-decoration:none;
    color: #821b31;
}
a.top-req-info:hover, #top-nav-book:hover {
    background:  #821b31;
    color: white;
}
#top-nav-book:hover a {
    color: white;
}
#top-nav-more a, #top-nav-no a, #top-nav-book a, .hidden a {
    color: #FFF;
    font-size: 0.80rem;
}
.rotate {
    transform: rotate(180deg);
}
ul.top-nav-right{
    list-style: none;
    float: right;
    display: inline;
    margin: 7px 0;
}

ul.top-nav-right li{
    display:inline;
    padding: 8px 25px 8px;
}

li#top-nav-more{
    background: #cd1729;
}

#top-nav-more img{
    margin-right: 15px;
    transition: 0.3s;
}

.hidden {
    position: absolute;
    left: 321px;
    visibility: hidden;
    transition:all 1s linear;
}
.hidden-click {
    transition:all 1s linear;
    position: relative;
    left: 0;
    visibility: visible;
}
ul .hidden:first-child {
    display: inline!important;
    left: 0;
}
.search-bar input {
    background-color: #821A31;
    color: #ffff;
    font-size: 35px;
    border: 0;
    margin: 0;
    height: 76px;
    width: 100%;
    padding: 0 80px;
    font-weight: 200;
    display: none;
}
.search-bar input:focus, .search-bar input:focus{
    outline: none;
}
.search-bar input.slide-down {
    display: block;
}
.search-bar input::placeholder {
    color: white;
}
.hover-bar {
    background: #821A31!important;
}

Working/semi-working example: https://jsfiddle.net/qLpfynks/

Answer 2

I believe the reason is because you are switching from display:none to display: inline . CSS cannot transition display and so it will show the "transition" immediately.

To fix this and still achieve the desired effect change it to

.hidden {
position: relative;
left: 321px;
display: inline!important;
    opacity:0; /*makes it invisible*/
transition:all 1s linear;
    /*transition:left 1s linear*/
}
.hidden-click {
transition:all 1s linear;
    /*transition:left 1s linear*/
position: relative;
left: 0;
    opacity: 1; /*makes it visible*/
display: inline!important;
}

Note that if you use the specificier all for your transition you will see a fade in and out animation. If you don't want this, specify only left (see commented CSS code)