現在，免費的CSS3動畫案例越來越少見。這是因為很多開發者都選擇將其作為收費項目發布。然而，仍然有一些人愿意免費分享他們的作品。下面是一些非常棒的免費CSS3動畫案例：

.flip-card {
background-color: transparent;
width: 300px;
height: 250px;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
}
.flip-card-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}

這個動畫是一個非常炫酷的卡片翻轉效果。當鼠標懸停在卡片上時，它會向后翻轉，顯示卡片的背面，當鼠標移開時，它會翻轉回來。通過添加“perspective”屬性，我們可以調整卡片的視角。

.loader {
border: 16px solid #f3f3f3; 
border-top: 16px solid #3498db; 
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

這個動畫是一個旋轉加載器的示例。它使用了“@keyframes”屬性來定義旋轉動畫。我們可以更改“transform”屬性的“rotate”值以改變旋轉方向和速度。

.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: -5px;
left: 105%;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}

這個動畫是一個簡單的文字提示效果。當鼠標懸停在元素上時，提示框會出現。它使用了“visibility”屬性來切換提示框的可見性。

這些免費的CSS3動畫案例是我們可以在項目中使用的一些很好的示例。它們不僅易于實現，而且可以輕松地自定義以滿足我們的需求。