CSS3 animation 轮播是一种简单而又美观的网页设计方式，它可以实现在网页中以动态形式展示图片或文字信息的效果。下面我们来看一下如何使用 CSS3 animation 轮播。

HTML 代码
CSS 代码
.slider {
width: 100%;
height: 500px;
overflow: hidden;
}
.slider img {
width: 100%;
height: 100%;
position: absolute;
opacity: 0;
/* 动画实现 */
animation: slide 6s ease infinite;
}
/* 动画代码 */
@keyframes slide {
0% {
opacity: 0;
transform: translateX(0);
}
16.7% {
opacity: 1;
transform: translateX(0);
}
33.3% {
opacity: 1;
transform: translateX(-100%);
}
50% {
opacity: 0;
transform: translateX(-100%);
}
66.7% {
opacity: 0;
transform: translateX(-100%);
}
83.4% {
opacity: 1;
transform: translateX(-100%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}

首先，在 HTML 代码中，我们用 <div> 元素包含img元素，每个 <img> 元素代表要展示的图片，alt属性是图片的文字描述。

然后，在 CSS 代码中，我们设置 slider 元素的宽高和 overflow 属性，使它所包含的子元素超出 slider 元素可视范围时隐藏。接着，我们设置 <img> 元素的宽高、位置和 opacity 属性，其中 position 属性值为 absolute，使得 <img> 元素可以在 slider 外上下层叠显示。

最后，我们通过 keyframes 关键字来创建动画，定义了一个名为 slide 的动画，它是一个由七个关键帧构成的动画，每个关键帧代表了一个动画状态。我们将这个动画应用在 <img> 元素中，让它们在一定时间内无限循环，并且由透明变为不透明、从起始位置移动到终止位置。