Html css中的动画不起作用

我想让滑块在页面中央的按钮点击，3秒后，它应该这样了。 但它不是滑动而是突然的，不是滑动

输入{显示：无}
安尼先生
{
宽度：100px；
位置：绝对位置；
高度：100px；
背景：红色；
过渡：前2名；
-moz过渡：前2名；/*Firefox 4*/
-webkit过渡：顶级5s；/*Safari和Chrome*/
-o型过渡：前2名；/*Opera*/
显示：块；
}
.hi:checked+.ani{top:50%；}

---

您需要给

.ani

一个初始

top

值：

输入{显示：无}
安尼先生
{
宽度：100px；
位置：绝对位置；
高度：100px；
背景：红色；
过渡：前2名；
-moz过渡：前2名；/*Firefox 4*/
-webkit过渡：顶级5s；/*Safari和Chrome*/
-o型过渡：前2名；/*Opera*/
显示：块；
排名：0；
}
.hi:checked+.ani{top:50%；}

---

您需要给

.ani

一个初始

top

值：

输入{显示：无}
安尼先生
{
宽度：100px；
位置：绝对位置；
高度：100px；
背景：红色；
过渡：前2名；
-moz过渡：前2名；/*Firefox 4*/
-webkit过渡：顶级5s；/*Safari和Chrome*/
-o型过渡：前2名；/*Opera*/
显示：块；
排名：0；
}
.hi:checked+.ani{top:50%；}