效果截图：

HTML代码：

<div class="pic-switch">
    <div class="pic"><span>A</span></div>
    <div class="pic"><span>B</span></div>
    <div class="pic"><span>C</span></div>
</div>

CSS代码：

.pic-switch{
    width: 500px;
    height: 300px;
    margin: 0px auto;
    border: 5px solid #CCCCCC;
    border-radius: 5px;
    overflow: hidden;
}
.pic-switch .pic{
    background-color: #009688;
    height: 100%;
    width: 100%;
    text-align: center;
    display: table;
}
.pic-switch .pic span{
    color: #FFFFFF;
    font-size: 60px;
    display: table-cell;
    vertical-align: middle;
}
.pic-switch .pic:nth-child(2){
    background-color: #5FB878;
}
.pic-switch .pic:nth-child(3){
    background-color: #FF5722;
}
.pic{
    animation: one 12s linear 0s infinite normal;
    position: relative;
}
@keyframes one{
    0%,30% {
        top: 0px;
    }
    35%,65% {
        top: -300px;
    }
    70%,100% {
        top: -600px;
    }
}