CSS動畫效果可以讓提交成功的動作更加生動、自然。通常，我們可以使用CSS3中的transition屬性和animation屬性兩種方式來實現提交成功的動畫效果。下面分別介紹這兩種實現方式。

transition: width 0.5s ease-out;

使用transition屬性，我們可以將提交按鈕的寬度設置為0，再在提交成功后將寬度增加到100%。代碼實現如下：

button {
transition: width 0.5s ease-out;
width: 100px;
}
button.submit {
width: 0;
}
button.success {
width: 100%;
}

在按鈕上綁定點擊事件，當點擊提交按鈕時，我們可以通過添加success類名來觸發動畫效果：

$("button.submit").click(function() {
$(this).addClass("success");
});

使用上述代碼，在點擊提交按鈕后，按鈕的寬度會從0漸變到100%。

@keyframes submit-success {
0% {
transform: scale(0.5);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}

使用animation屬性，我們可以通過定義動畫關鍵幀來實現提交成功的動畫效果。代碼實現如下：

button {
width: 100px;
}
button::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 30px;
height: 30px;
margin-top: -15px;
margin-left: -15px;
border-radius: 50%;
border: 2px solid #fff;
animation: submit-success 0.5s forwards;
transform: scale(0.5);
opacity: 0;
}

我們首先定義了一個假的提交按鈕，使用::after偽元素在按鈕的中心生成一個圓形元素，色值為白色，邊框寬度為2px。接下來，我們定義submit-success關鍵幀，通過縮放和透明度變化來實現提交成功的動畫效果。最后，我們在按鈕上使用animation屬性引用這個關鍵幀。

$("button.submit").click(function() {
$(this).addClass("success");
setTimeout(function() {
$(this).removeClass("success");
}, 500);
});

使用上述代碼，在點擊提交按鈕后，生成的圓形元素會從小到大漸變，并且從透明到不透明。等動畫結束后，我們再將這個圓形元素從按鈕上去掉。