CSS转换出效果不起作用

Question

我已创建一个小的过渡效果

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。 （自：悬停状态“继承”从正常状态的值，它足以只在这里指定为正常状态。）

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>

Answer 2

这是因为怎样的CSS作品。你有两个选择器，每个都有自己的规则。

div#Back a { 
    // rules 1 
} 

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

如果你悬停<a>元素，它将执行rules 2集。此设置应用了过渡效果，因此当您将其悬停时，会看到移动的动画显示为更圆整的按钮。

但是，当使用鼠标离开<a>元素时，悬停效果不再有效，因此会回到rules 1集。但是，它不包含过渡动画。所以渲染引擎将会按照规则中所描述的那样“弹出”样式。如果要将动画制作回原始状态，只需为该选择器定义转换规则，并仅在悬停元素时更改这些值（用于动画）效果。

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>

Answer 3

将与格＃过渡返回，而不是徘徊。

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>