CSS文本框動畫是一種非常流行的網頁設計技巧，它可以為網頁增加動感和互動性。這種動畫可以應用于許多不同的元素，如按鈕、搜索框、登錄框等。

/* 創建一個文本框動畫 */
.input-box {
position: relative;
display: inline-block;
}
.input-box input {
width: 200px;
height: 40px;
padding: 10px;
border: none;
border-bottom: 2px solid #ccc;
font-size: 16px;
transition: all .3s ease-in-out;
}
.input-box label {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
font-size: 16px;
color: #999;
transition: all .3s ease-in-out;
}
.input-box input:focus + label,
.input-box input:valid + label {
top: 0;
left: 0;
transform: translateY(0);
font-size: 12px;
color: #757575;
}

上面的代碼演示了如何創建一個基本的文本框動畫。其中，input-box用于定義文本框的容器，而input和label則分別用于定義文本框和文本框提示信息的樣式。

通過transition屬性，我們可以為input和label元素設置動畫效果。在這個例子中，我們應用了ease-in-out參數實現了緩沖效果。

另外，我們還使用了偽類選擇器:focus和:valid來控制文本框提示信息的位置和樣式。當用戶輸入內容時，:valid會生效并移動提示信息到文本框上方。

在實際應用中，我們可以通過更改樣式屬性和調整過渡效果，來創建各種不同的文本框動畫。