CSS中的animate是一种非常有用的属性，可以让我们创建动态的网页效果，如悬浮导航、滚动图像等等。animate属性可以结合keyframes使用，使网页元素能够在特定时间间隔内经历一系列动画效果。

使用animate属性需要声明两个属性：动画名称和动画时间。

.example {
animation-name: move;  /* 动画名称 */
animation-duration: 2s; /* 动画时间 */
}

接下来，我们需要定义这个动画效果的具体细节，可以使用keyframes属性。可以将动画效果分成许多小的时间段，每一个时间段包含元素应该有的样式。这些时间段被称为关键帧。在每一个关键帧中，您可以指定元素的各种属性。

@keyframes move {
0% {transform: translateX(0)}
50% {transform: translateX(50px)}
100% {transform: translateX(100px)}
}

在上述代码中，我们定义了一个名为“move”的关键帧。它指定了元素应该在0%、50%、100%的时候应该具有的样式。

在HTML中，我们可以使用以下代码将CSS动画应用到元素上：

这样，我们的CSS动画就完成了！您可以根据需要重复应用动画，或者通过css指定其他属性，例如动画的延迟、播放状态、动画次数等等。