CSS3的出現為Web設計帶來了更豐富的動畫效果，其中Banner動畫效果是一個非常熱門的應用。下面我們將介紹如何使用CSS3實現一個Banner動畫效果。

.banner{
position:relative;
height:400px;
}
.banner img{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
}
.banner .slide-right,.banner .slide-left{
position:absolute;
top:50%;
transform:translateY(-50%);
width:50%;
height:100%;
overflow:hidden;
z-index:1;
}
.banner .slide-right{
right:0;
}
.banner .slide-left{
left:0;
}
.banner .slide-right:before,.banner .slide-left:before{
content:' ';
position:absolute;
top:0;
width:100%;
height:100%;
z-index:2;
background:rgba(0,0,0,0.6);
}
.banner .slide-right .text,.banner .slide-left .text{
position:absolute;
top:50%;
transform:translateY(-50%);
width:100%;
color:#fff;
text-align:center;
z-index:3;
}
.banner .slide-right .text h2,.banner .slide-left .text h2{
font-size:4rem;
margin-bottom:20px;
}
.banner .slide-right .text p,.banner .slide-left .text p{
font-size:2rem;
margin-bottom:20px;
font-weight:300;
}
.slide-right{
animation:slide-right .8s ease-in-out both;
}
.slide-left{
animation:slide-left .8s ease-in-out both;
}
@keyframes slide-right{
from{
transform:translateX(0%);
}
to{
transform:translateX(100%);
}
}
@keyframes slide-left{
from{
transform:translateX(0%);
}
to{
transform:translateX(-100%);
}
}

這段CSS代碼實現了一個基本的Banner效果。其中，.banner是Banner的外層容器，其下有多個img標簽作為輪播圖片。.slide-right和.slide-left是兩個側邊容器，分別放置左右的文本信息。接下來，我們可以使用JavaScript來控制Banner的輪播效果。