css - 定义 CSS 过渡效果(开始和结束定位)

Question

一个小的 CSS 过渡效果:

div#Back a {
    width: 40px;
    height: 20px;
    position: fixed;
    left: 6%;
    color: #cccccc;
    z-index: 2;
    bottom: 5%;
    font-weight: 600;
    font-size: 18px;
    font-variant: inherit;
    border: 1px solid;
    padding: 10px;
    border-radius: 15px;
}

div#Back a:hover {
    border-radius: 0px;
    -moz-border-radius: 0px; 
    
    -webkit-transition: border-radius 2s ease-out;
    -moz-transition: border-radius 2s ease-out;
    -o-transition: border-radius 2s ease-out;
    transition: border-radius 2s ease-out;
    
}

<div id="Back"><a onclick="goBack();">Back</a></div>

悬停效果很好，但无法过渡到原始效果。它直接跳。有什么问题？

Answer 1

问题是您只为悬停状态指定了 transition - 因此当状态在另一个“方向”发生变化时，从悬停回到正常时，不会发生任何转换。

为两者指定transition。 (由于 :hover 状态“继承”了正常状态的值，因此仅在此处为正常状态指定它就足够了。)

div#Back a {
    width: 40px;
    height: 20px;
    position: fixed;
    left: 6%;
    color: #cccccc;
    z-index: 2;
    bottom: 5%;
    font-weight: 600;
    font-size: 18px;
    font-variant: inherit;
    border: 1px solid;
    padding: 10px;
    border-radius: 15px;
    -webkit-transition: border-radius 2s ease-out;
    -moz-transition: border-radius 2s ease-out;
    -o-transition: border-radius 2s ease-out;
    transition: border-radius 2s ease-out;
}

div#Back a:hover {
    border-radius: 0px;
    -moz-border-radius: 0px; 
}

<div id="Back"><a onclick="goBack();">Back</a></div>