今天我们来介绍一下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函数，看看有什么不同的效果。