CSS transition仅首次表单切换动画不生效问题咨询

• CSS过渡动画仅在属性的起始值、结束值均为可计算的明确数值时生效。你代码中#form的初始margin-left值为auto（继承自margin: 55px auto auto的简写规则），auto不属于transition支持的可插值数值类型。
• 首次点击登录按钮修改margin-left为-100%时，浏览器无法完成auto到-100%的数值补间，直接跳转至最终状态，无过渡效果。后续切换时margin-left已经是明确的百分比值，两个状态都有可计算的数值，过渡就可以正常触发。

任选一种即可：

1. 在CSS中显式指定#form的初始margin-left值：

.animateContainer .outer #form {
    width: 200%;
    position: relative;
    display:flex;
    align-content: flex-start;
    align-items: flex-start;
    margin: 55px auto auto;
    margin-left: 0; /* 新增该行明确初始值 */
    transition: 0.2s ease-in-out; 
}

2. DOM加载完成后主动给#form设置初始margin-left：

$(document).ready(function() {
  $("#form").css("margin-left", "0");
})

内容的提问来源于stack exchange，提问作者John Christian