要制作翻页效果的CSS动画，可以使用CSS的`@keyframes`规则来定义动画的关键帧，并使用`animation`属性应用动画效果。

下面是一个简单的示例，展示了如何制作一个向右翻页的动画效果：

html

/* 定义动画的关键帧 */
@keyframes flip {
0% {
transform: perspective(400px) rotateY(0deg);
}
50% {
transform: perspective(400px) rotateY(180deg);
}
100% {
transform: perspective(400px) rotateY(180deg);
}
}

/* 应用动画效果 */
.flip-card {
perspective: 1000px;
}

.flip-card-inner {
position: relative;
width: 200px;
height: 200px;
transition: transform 0.6s;
transform-style: preserve-3d;
animation: flip 1s ease-in-out infinite;
}

.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: #2980b9;
color: white;
transform: rotateY(180deg);
}

在这个示例中，我们通过`@keyframes`规则定义了一个名为`flip`的动画，该动画在50%的关键帧时将元素沿Y轴旋转180度。

然后，我们使用`animation`属性将`flip`动画应用到`.flip-card-inner`元素上，并设置动画的持续时间为1秒，缓动函数为`ease-in-out`，并设置动画无限循环。

最后，我们通过调整元素的`transform`属性，使其具有3D效果，并在正面和背面元素上使用`backface-visibility`属性来控制背面元素的可见性。

以上是一个简单的翻页效果的CSS动画示例，你可以根据自己的需求进行调整和扩展。