CSS3的动画效果丰富多彩，其中最具有趣味性的要数气球飘动效果了。下面我们就来一起学习一下如何实现CSS3气球飘动的效果吧！

.balloon {
position: absolute;
width: 50px;
height: 70px;
background-color: #ff6b6b;
border-radius: 50% 50% 40% 40%;
animation-name: float;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes float {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-30px);
}
100% {
transform: translateY(0);
}
}

首先，我们要创建一个气球的div容器，并给它设置好一些基本的样式属性，比如说宽度、高度、背景颜色和圆角等等。

接着，我们要在气球的容器上设置CSS3动画的相关属性，其中animation-name指定了要应用的动画名称，animation-duration控制了动画的持续时间，animation-iteration-count指定了动画的循环次数，而animation-timing-function则是控制了动画运动的速度变化。

最后，在@keyframes中我们就可以定义气球的动画运动轨迹了。在示例中，我们使用了transform: translateY来实现气球在垂直方向上的运动。0%和100%表示气球在初始位置和终止位置时的状态，而50%则是气球在运动中的中间状态。

通过以上的步骤，我们就可以成功地实现一个简易的CSS3气球飘动的效果了。除此之外，我们还可以根据具体需求进行更多的样式定制和动画配置，以达到更加精美的效果。