CSS3动画是一种令人惊叹的前端技术，通过优雅而灵活的代码实现视觉效果，可以为我们的网站增添生动的元素。以下是一些令人惊喜的好玩CSS3动画。

.fade-in {
opacity: 0;
animation: fadeIn 1s ease-in-out forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

这是一个简单的淡入动画，当元素加载时，它将通过渐变动画从不透明度为0到1。这个动画使用了CSS3中的关键帧（keyframes）和动画（animation），使得动画变得非常简单易懂。

.rotate {
animation: spin 1s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

这个动画让元素疯狂旋转，在页面上添加了一些减轻压力的元素。animation属性的值是spin关键帧动画，其中旋转角度从0到360度，需要无限循环。

.bounce {
animation: bounce 1s ease-in-out infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}

这个动画让元素像弹簧一样反弹，有一个渐变效果。它使用关键帧动画，从0%到100%设置动画中止。具体的行为是在40%开始反弹，之后在20%，50%，80%，100%的时间点回到原点，60%时间点开始向上弹一点距离。

总之，CSS3动画在网站设计和开发中是非常有用的工具。通过它们，我们可以提高用户体验，并在页面上添加出色的元素。