今天我們來介紹一下CSS3動畫中的out函數，它是一個非常有用的函數，可以使元素以特定的方式動畫結束。

/* out函數有很多種，這里只介紹幾種 */
/* ease-out：先加速后減速 */
animation-timing-function: ease-out;
/* cubic-bezier(0,0,0.58,1)：自定義曲線，可以實現復雜效果 */
animation-timing-function: cubic-bezier(0,0,0.58,1);
/* steps(4, end)：分幀動畫，每4幀結束，最后一幀保持不變 */
animation-timing-function: steps(4, end);

接下來我們演示一下使用out函數實現的動畫效果：

/* 定義一個50px * 50px的div，初始位置在屏幕左上角 */
div {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
top: 0;
left: 0;
}
/* 給div添加動畫 */
div {
animation: move 2s ease-out;
}
/* 定義動畫 */
@keyframes move {
from { left: 0; top: 0; }
to { left: 200px; top: 200px; }
}

上面的代碼定義了一個從左上角移動到右下角的動畫，使用了ease-out函數，讓動畫從開始時逐漸加速，到結束時逐漸減速。你也可以嘗試使用其他的out函數，看看有什么不同的效果。