کار نکردن پراپرتی‌های css در animate

jQuery('#submit').on('click',function (e){
    e.preventDefault()
    jQuery('#submit').animate({
        opacity:0.8,width:20px,
    });

دستور فوق برای animate کردن دکمه button با تایپ submit کار نمیکنه فقط opacity رو اعمال میکنه و زمانه که میخوام بگم مثلا width:50% یا width:20px این المنت اعمال نمیشه و بقیه موارد دیگر فرم را هم که با جی کوری دادم از کار میوفته بقیه دستورات css و html را هم در زیر براتون میزارم ممنون میشم راهنمایی کنید

.btn-acction{
    background-color: #76d776;
    border: none;
    border-radius: 3px;
    color: #fff;
    padding: 5px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    top: 120px;
    width: 100%;
}

<body>
<section>
    <form action="" id="login-form">
        <label for="username">نام کابریlabel>
        <input type="text" id="username" class="box">
        <label for="password">کلمه عبورlabel>
        <input type="password" id="password" class="box">
        <button type="submit"  id="submit" class="btn-acction" >ورود<i class="fas fa-spinner fa-spin loading">i> button>

    form>
    <br>
    <br>
    <br>
    <div class="login-social-network">