CSS動畫是網頁設計中不可或缺的一部分，它可以使界面更加生動有趣。今天我們來介紹一下CSS動畫輸入框的制作方法。

.input-box {
width: 300px;
height: 40px;
border: 1px solid #ccc;
border-radius: 20px;
padding: 10px;
font-size: 16px;
outline: none;
transition: all 0.3s ease-in-out;
}
.input-box:focus {
width: 350px;
border-color: #4e8cff;
box-shadow: 0 0 0 2px #4e8cff;
}

以上代碼是輸入框的基本樣式，我們對其需要實現的效果是在輸入框獲得焦點時，輸入框變寬、邊框變色，同時添加一個box-shadow虛化效果。

@keyframes shake {
0% {transform: translateX(0);}
20% {transform: translateX(-10px);}
40% {transform: translateX(10px);}
60% {transform: translateX(-10px);}
80% {transform: translateX(10px);}
100% {transform: translateX(0);}
}
.input-box.error {
animation: shake 0.5s;
}

如果我們希望在輸入框錯誤時能夠實現一定的動畫效果，可以使用CSS3中的animation屬性，并結合一個自定義的keyframes。

以上就是CSS動畫輸入框的制作方法。不同的動畫效果可以通過調整屬性值來實現，讓你的網頁更加生動有趣。