Transition from right: 0; to right: auto;

Question

Is there any way to transition from right: 0; to right: auto; on a position: fixed; item? I know that if I set a value instead of the 'auto' then the transition works, though on auto it doesn't. Any work around?

The item:

jQuery(document).ready(function() {
    $(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 200) {
        $(".Donation_Container").addClass("Donation_Container2");
    } else {
        $(".Donation_Container").removeClass("Donation_Container2");
    }
});
});

body {
height: 2000px;
}

.Donation_Container {
    position: fixed;
    margin: 0 auto;
    padding: 10px;
    text-align: center;
    left: 0;
    bottom: 0;
    z-index: 50;
    right: 0;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.Donation_Container2 {
    left: 0;
    right: auto;
    bottom: 0;
    z-index: 50;
}

.Donation_Container a {
    margin: 0 auto;
    padding: 0;
    text-align: center;
    color: red;
    text-decoration: none;
    font-size: 2.5rem;
    text-transform: uppercase;
    text-shadow:
    -1px -1px 0 white,  
    1px -1px 0 white,
    -1px 1px 0 white,
     1px 1px 0 white;
    font-weight: 700;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Donation_Container">
    <a href="#"><i class="fa fa-heart" aria-hidden="true"></i><br>Donation</a>
</div>

Possible duplicate of [How can I transition height: 0; to height: auto; using CSS?](https://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css) — jaunt, Oct 24 '17 at 11:07

score 1 · Accepted Answer · answered Oct 24 '17 at 11:12

Instead of using transition for height use transform:

left: 50%;
transform: translateX(-50%);

jQuery(document).ready(function() {
    $(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 200) {
        $(".Donation_Container").addClass("Donation_Container2");
    } else {
        $(".Donation_Container").removeClass("Donation_Container2");
    }
});
});

body {
height: 2000px;
}

.Donation_Container {
    position: fixed;
    margin: 0 auto;
    padding: 10px;
    text-align: center;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50 -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.Donation_Container2 {
    left: 0;
    bottom: 0;
    z-index: 50;
    transform: translateX(0%);
}

.Donation_Container a {
    margin: 0 auto;
    padding: 0;
    text-align: center;
    color: red;
    text-decoration: none;
    font-size: 2.5rem;
    text-transform: uppercase;
    text-shadow:
    -1px -1px 0 white,  
    1px -1px 0 white,
    -1px 1px 0 white,
     1px 1px 0 white;
    font-weight: 700;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Donation_Container">
    <a href="#"><i class="fa fa-heart" aria-hidden="true"></i><br>Donation</a>
</div>

All you need is specific left or right not auto so you can set left: 50% and when scrolled set left: 0 but for placing it center of page you need transform: translateX(-50%)

Transition from right: 0; to right: auto;

1 Answers1