CSS3 Clip-Rect動畫是一種基于CSS3的動畫效果，可以讓元素在指定的矩形區域內進行移動、縮放等操作，并且可以實現平滑的過渡效果。以下是一些實例：

img {
clip: rect(0px, 50px, 100px, 0px);
transition: clip 2s ease-out;
}
img:hover {
clip: rect(0px, 100px, 100px, 50px);
}

這段代碼實現了一個圖片的動畫效果。初始狀態下，圖片只在矩形區域的左半部分顯示，而當鼠標懸停在圖片上時，圖片會平滑地移動到矩形區域的右半部分。這個效果基于CSS3的clip屬性實現，同時也使用了transition屬性來實現平滑的過渡效果。

div {
width: 300px;
height: 300px;
position: relative;
overflow: hidden;
}
div:before {
content: "";
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 0;
left: -100px;
border-radius: 50%;
animation: move 2s ease-in-out infinite;
}
@keyframes move {
0% {
transform: translateX(0);
}
50% {
transform: translateX(200px);
}
100% {
transform: translateX(0);
}
}

這個示例實現了一個移動動畫，一個紅色的圓形會在矩形區域內來回移動。該效果基于CSS3的transform屬性實現，同時使用了keyframes來實現平滑的過渡效果。

總之，CSS3 Clip-Rect動畫是一個非常有用的工具，可以讓我們實現各種各樣的動畫效果。掌握這個技術可以讓我們在網站和應用程序的設計中更加自如和靈活。