CSS3动画矩形广泛应用于网站开发和移动应用程序中。这种矩形动画可以通过CSS3的animation属性轻松地实现。以下是一个CSS3动画矩形的示例：

.square{
width: 50px;
height: 50px;
background-color: #3498db;
position:relative;
animation: square 2s ease infinite;
}
@keyframes square {
0% {
left: 0;
}
50% {
left: 50%;
}
100% {
left: 0;
}
}

在上面的代码中，我们首先定义了一个类名为“square”的div，设置了它的宽度、高度和背景颜色。我们还将它的position属性设置为relative，这样我们就可以使用left属性来控制它的位置。最后，我们将animation属性设置为“square”，这意味着我们将用CSS3动画效果“squre”来实现这个矩形动画。

接下来，我们在CSS3中使用了@keyframes规则来定义我们的动画效果。我们创建了一个从0%到100%的动画过程。“0%”状态下，我们将矩形的位置设置为初始位置，即左侧为0。“50%”状态下，我们将矩形的位置移动到屏幕的中心（即左侧为50%）。最后，在“100%”状态下，矩形将返回到它的初始位置。

这个动画将无限地重复，因为我们将animation属性的第四个值设置为“infinite”。

这只是CSS3动画矩形的一个基本示例。您可以根据需要调整类的样式和动画过程的细节，从而创建出各种各样的矩形动画效果。