CSS transition not working on first animation only-CodePudding

The following is a style I am using to animate between two forms (create an account and sign in).

Each time I reload the page and click "sign in", the transition happens instantly. There is no delay between the transition between the login form. However after that, I can toggle between the forms perfectly fine and the transition happens across whatever time (i.e. 0.2s) I put in the style.

It's only not working on the VERY first sequence.

Any ideas?

The CSS with the transition...

.animateContainer .outer #form {
        width: 200%;
        position: relative;
        display:flex;
        align-content: flex-start;
        align-items: flex-start;
        margin: 55px auto auto;
        transition: 0.2s ease-in-out; 
    }

The supporting html...

<div class="animateContainer">
    <div class="switch">
        <div class="signup" onclick="toggleRegisterForm('register');"><i class="fa fa-user-alt"></i> Create an Account </div>
        <div class="login" onclick="toggleRegisterForm('signin');"><i class="fa fa-sign-in-alt"></i>  Sign In</div>
    </div>
    <div class="outer">
        <div id="form">
            <div id="page" class="registerFormContent"><!-- content--></div>
            <div id="page" class="loginFormContent"><!-- content--></div>
        </div>
    </div>
</div>

and then the javascript

function toggleRegisterForm(to)
{
    
        if (to ==="signin")
        {
            $("#form").css("margin-left", "-100%");
            //other css style updates omitted
        }
        else
        {
            $("#form").css("margin-left", "0");
            //other css style updates omitted
        }
}

CodePudding user response：

The problem is that, the first time, you are transitioning from auto to a number, which can't be transitioned.

After that, you transition from 0 to -100% or from -100% to 0, which can be transitioned becuase both are numbers.

You should change the initial value of the margin to something like 55px auto auto 0 for example, that way it should work.

And just a tip, you are mixing many concepts in your description, animations and transitions and different things, and duration and delay are also different things. You name animations and delays which is confusing, what you have here is a transition with a duration or 0.2s.

CodePudding user response：

CSS cannot transition from auto, only actual values.