在網頁設計中，我們常常需要使用一些動畫效果來吸引用戶的注意力。其中，input css 動畫是一種非常流行的動畫效果之一。它可以為文本框、按鈕等表單元素添加動畫效果，使得用戶操作更加有趣。

輸入框動畫的代碼示例：
input {
border: none;
border-bottom: solid 1px #ccc;
outline: none;
transition: border-bottom-color 0.3s ease-in-out;
}
input:focus {
border-bottom-color: #FF6B6B;
}

代碼中，我們給輸入框添加了一個邊框底部的樣式，并且添加了一個過渡動畫效果。當輸入框聚焦時，邊框底部會發生顏色變化，形成一個動畫效果。

按鈕動畫的代碼示例：
button {
position: relative;
background-color: #EEE;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
transition: 0.5s;
overflow: hidden;
}
button span {
position: absolute;
display: block;
background-color: #FF6B6B;
width: 0;
height: 100%;
top: 0;
left: -100%;
z-index: -1;
transition: 1s;
}
button:hover span {
left: 0;
width: 100%;
}
button:hover {
color: #FFF;
}

代碼中，我們給按鈕元素添加了一個背景顏色，并添加了一個過渡動畫效果。當鼠標懸停在按鈕上時，按鈕會變成帶有紅色背景的狀態。同時，顏色變化的同時也會有一個span元素從左側開始展開，最終填滿整個按鈕，形成一個動畫效果。

總之，在設計網頁時，合理利用 input css 動畫，不僅可以為網頁添加更多的趣味性，還可以提升用戶體驗，值得我們使用。