Html 位置属性的CSS动画不工作

所以我从我的教科书中得到了这段代码，并在我的浏览器中试用了它，top属性的位置转换是一个即时跳转，而不是一个50像素的缓慢转换。我在网上搜索了一下，似乎可以转换position属性，但由于某些原因，它在我的代码中不起作用

这是版本

以下是与CSS相关的标记：

body {
  font-family: Tahoma, Verdana, Geneva, sans-serif;
  margin: 6em;
  font-weight: bold;
}
ul {
  list-style-type:none;
  margin: 0;
  padding: 0;
}
li {
  float: left;
}
a {
   display: block;
  width: 6em;
  margin: 0 5px;
  padding: .5em 1em;
  text-decoration: none;
  text-align: center;
  color: #fff;
  background-color: rgb(190, 190, 190);
  border: 2px solid rgb(175,175,175);
  border-radius: 6px;
  text-shadow: #666 .1em .1em .1em;
  box-shadow: 0 5px 3px rgba(0,0,0,.5);
  position: relative;
  -webkit-transition: background-color 0.2s, border-color 0.2s, top 25s, box-shadow 0.2s;
  -moz-transition: background-color 0.2s, border-color 0.2s, top 25s, box-shadow 0.2s;
  -o-transition: background-color 0.2s, border-color 0.2s, top 25s, box-shadow 0.2s;
  -ms-transition: background-color 0.2s, border-color 0.2s, top 25s, box-shadow 0.2s;
  transition: background-color 0.2s, border-color 0.2s, top 25s, box-shadow 0.2s;
}

a:hover, a:focus {
  background-color: #fdca00;
  border-color: #fda700;
}
a:active {
  top: 100px;
  box-shadow: 0 1px 2px rgba(0,0,0,.5);
}

<ul>
<li><a href="">Men</a></li>
<li><a href="">Women</a></li>
<li><a href="">Kids</a></li>
<li><a href="">SALE</a></li>
</ul>

以下是与HTML相关的标记：

body {
  font-family: Tahoma, Verdana, Geneva, sans-serif;
  margin: 6em;
  font-weight: bold;
}
ul {
  list-style-type:none;
  margin: 0;
  padding: 0;
}
li {
  float: left;
}
a {
   display: block;
  width: 6em;
  margin: 0 5px;
  padding: .5em 1em;
  text-decoration: none;
  text-align: center;
  color: #fff;
  background-color: rgb(190, 190, 190);
  border: 2px solid rgb(175,175,175);
  border-radius: 6px;
  text-shadow: #666 .1em .1em .1em;
  box-shadow: 0 5px 3px rgba(0,0,0,.5);
  position: relative;
  -webkit-transition: background-color 0.2s, border-color 0.2s, top 25s, box-shadow 0.2s;
  -moz-transition: background-color 0.2s, border-color 0.2s, top 25s, box-shadow 0.2s;
  -o-transition: background-color 0.2s, border-color 0.2s, top 25s, box-shadow 0.2s;
  -ms-transition: background-color 0.2s, border-color 0.2s, top 25s, box-shadow 0.2s;
  transition: background-color 0.2s, border-color 0.2s, top 25s, box-shadow 0.2s;
}

a:hover, a:focus {
  background-color: #fdca00;
  border-color: #fda700;
}
a:active {
  top: 100px;
  box-shadow: 0 1px 2px rgba(0,0,0,.5);
}

<ul>
<li><a href="">Men</a></li>
<li><a href="">Women</a></li>
<li><a href="">Kids</a></li>
<li><a href="">SALE</a></li>
</ul>

正确的小提琴
我刚刚在标签

a

中添加了

top:0px

a {
   display: block;
  width: 6em;
  margin: 0 5px;
  padding: .5em 1em;
  text-decoration: none;
  text-align: center;
  color: #fff;
  background-color: rgb(190, 190, 190);
  border: 2px solid rgb(175,175,175);
  border-radius: 6px;
  text-shadow: #666 .1em .1em .1em;
  box-shadow: 0 5px 3px rgba(0,0,0,.5);
  position: relative;
   top: 0px;
  -webkit-transition: background-color 0.2s, border-color 0.2s, top 1s, box-shadow 0.2s;
  -moz-transition: background-color 0.2s, border-color 0.2s, top 1s, box-shadow 0.2s;
  -o-transition: background-color 0.2s, border-color 0.2s, top 1s, box-shadow 0.2s;
  -ms-transition: background-color 0.2s, border-color 0.2s, top 1s, box-shadow 0.2s;
  transition: background-color 0.2s, border-color 0.2s, top 1s, box-shadow 0.2s;
}

---

希望就是你想要的：）

旁注：你确定要让顶级动画花25秒吗？你认为应该是

.25s

？对，我把它设置为25秒作为一个极限测试，以确保它不是我眼睛的问题：PThanks！这是完美的，你能解释一下为什么这个添加修复了这个问题吗？