HTML轮播图片卡在一起,纯html+css的轮播图问题

html：

1

2

3

css：

.slide{

width: 200px;

height: 80px;

position: relative;

margin: 0 auto;

overflow: hidden;

background-color: #f00;

}

.slide-content{

width: 100%;

height: 100%;

position: absolute;

right: -100%;

top: 0;

animation: slider-out 0.5s linear;

}

.slide-content:target{

right: 0%;

animation: slider-in 0.5s linear;

}

@keyframes slider-out{

from{

right: 0%;

}

to{

right: -100%;

}

}

@keyframes slider-in{

from{

right: 100%;

}

to{

right: 0%;

}

}

#slide1{

background-color: #f00;

}

#slide2{

background-color: #0f0;

}

#slide3{

background-color: #00f;

}

.btns{

position: absolute;

left: 0;

bottom: 0;

z-index: 100;

}

.btn{

float: left;

margin-left: 10px;

display: block;

text-align: center;

text-decoration: none;

width: 20px;

line-height: 20px;

opacity: 0.6;

color: #fff;

background-color: #b7b7b7;

}

想达到的效果是点击按钮后，对应的slide块由左往右滑动出现。

调试发现：

单击按钮后，所点按钮对应的slide块的显示效果没有按预期地变化，但其right属性和预期是一样的，与显示效果不符？

按钮部分会很奇怪地跑到右边去，我的理解是按钮明明是position:absolute的，应该基于父元素div.slide定位，为什么会和它兄弟元素一起移动所以理解不能~

将 slide-content元素的属性改为 right:100%后，完美运行，为什么？测试了一下animation配合@keyframes的动画，即使0%时的属性与元素本身属性不符，动画也会正常按流程运行，只是有个突变的效果，为什么此处行不通？

请各位指教！谢谢~！