CSS3的强大功能可以实现很多华丽的页面动画效果，今天我们来一起学习一下如何使用CSS3制作一辆车子开动的动画效果。

.car {
position: relative;
transform: translateX(-100px);
animation: move 4s forwards;
}
.wheel-left {
position: absolute;
top: 160px;
left: 40px;
width: 60px;
height: 60px;
border: 5px solid #000;
border-radius: 50%;
animation: rotate 4s linear infinite;
}
.wheel-right {
position: absolute;
top: 160px;
right: 40px;
width: 60px;
height: 60px;
border: 5px solid #000;
border-radius: 50%;
animation: rotate 4s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
@keyframes move {
from {
transform: translateX(-100px);
}
to {
transform: translateX(500px);
}
}

首先我们要在页面中创建一个div元素，作为车子的容器，然后在这个div元素中创建两个小div元素，分别代表汽车的左轮和右轮。接着，我们定义.car类，设置其相对定位，并通过transform属性将其向左平移100像素，这样就可以保证车子在页面最左边。

接下来就是关键的动画效果部分，我们需要定义一个名为"move"的动画，使得车子从最左边移动到最右边。这里我们通过animation属性绑定了"move"动画，并设置了forwards参数，让动画在执行完毕后保持最终状态。

接下来，我们为车子的每个轮子定义一个名为"rotate"的动画，使得轮子能够无限旋转。这里我们设置了从0度到360度的旋转效果，让轮子看起来像是在滚动。

最后，我们需要在HTML中加入对应的类名，让css代码生效，同时也需要引入css文件。这样，我们就可以看到一辆车子在页面中慢慢行驶的动画效果了！