定义CSS过渡效果（开始和结束位置）

小CSS过渡效果：

div#Back a{
宽度：40px；
高度：20px；
位置：固定；
左：6%；
颜色：#中交；
z指数：2；
底部：5%；
字号：600；
字号：18px；
字体变体：继承；
边框：1px实心；
填充：10px；
边界半径：15px；
}
a组：悬停{
边界半径：0px；
-moz边界半径：0px；
-webkit过渡：边界半径2缓减；
-moz过渡：边界半径2s减小；
-o型过渡：边界半径2s减小；
过渡：边界半径2s减小；
}

---

Back

问题在于，您仅为悬停状态指定了

transition

——因此，当状态在另一个“方向”（从悬停返回正常）发生变化时，不会发生转换

为两者指定

转换

。（由于：hover状态“继承”了正常状态的值，因此仅在此处为正常状态指定它就足够了。）

div#Back a{
宽度：40px；
高度：20px；
位置：固定；
左：6%；
颜色：#中交；
z指数：2；
底部：5%；
字号：600；
字号：18px；
字体变体：继承；
边框：1px实心；
填充：10px；
边界半径：15px；
-webkit过渡：边界半径2缓减；
-moz过渡：边界半径2s减小；
-o型过渡：边界半径2s减小；
过渡：边界半径2s减小；
}
a组：悬停{
边界半径：0px；
-moz边界半径：0px；
}

---

Back

这是因为CSS是如何工作的。这里有两个选择器，每个选择器都有自己的规则

div#Back a {
   // rules 1
}

div#Back a:hover {
   // rules 2
}

如果将

元素悬停，它将执行

规则2

集。该集应用了过渡效果，因此在将动画悬停在更圆的按钮上时，可以看到该动画正在移动

但是当鼠标离开

元素时，悬停效果不再有效，因此返回到

规则1

集。但是，它不包含过渡动画。因此，渲染引擎将“弹出”规则中描述的样式。如果要将动画设置回原始状态，只需为该选择器定义转换规则，并仅在悬停元素时更改值（用于动画）效果

div#Back a{
宽度：40px；
高度：20px；
位置：固定；
左：6%；
颜色：#中交；
z指数：2；
底部：5%；
字号：600；
字号：18px；
字体变体：继承；
边框：1px实心；
填充：10px；
边界半径：15px；
-webkit过渡：边界半径2缓减；
-moz过渡：边界半径2s减小；
-o型过渡：边界半径2s减小；
过渡：边界半径2s减小；
}
a组：悬停{
边界半径：0px；
-moz边界半径：0px；
}

---

Back

使用div#Back而不是悬停放置转换

div#Back a{
宽度：40px；
高度：20px；
位置：固定；
左：6%；
颜色：#中交；
z指数：2；
底部：5%；
字号：600；
字号：18px；
字体变体：继承；
边框：1px实心；
填充：10px；
边界半径：15px；
-webkit过渡：边界半径2缓减；
-moz过渡：边界半径2s减小；
-o型过渡：边界半径2s减小；
过渡：边界半径2s减小；
}
a组：悬停{
边界半径：0px；
-moz边界半径：0px；
}

---

Back

请为goBack添加js代码，我尝试复制时出错。如果转换相同，则不需要在：hover状态下进行转换。