不悬停时反向过渡

Question

我是新手 html/css，我遇到了一些关于悬停过渡的问题，我想要的是在不悬停的情况下过渡回初始状态，我不喜欢当我松开鼠标时 returns 突然

CSS

.btn {
    cursor: pointer;
    display: inline-inline-block;
    border: 0;
    font-weight: bold;
    padding: 10px 20px;
    background: #262626;
    color: #ffffff;
    font-size: 15px;
    border-radius: 0.31em;
    margin: 10px 0px;
    opacity: .4;
}

.btn:hover {
    background-color:rgba(26,26,26,.4);
  box-shadow: 0 0 0 3px rgba(53, 37, 152, 0.5);
    transition: .8s;
}

HTML

   <a href="#" class="btn">Leer más <i class="fas fa-angle-double-right"></i></a>

请耐心等我啊哈哈

谢谢大家

Answer 1

为 .btn 添加 transition: .8s; 而不是 .btn:hover。

Answer 2

我已经实施了 Felix AJ 响应，并且 100% 有效。

.btn {
    cursor: pointer;
    display: inline-inline-block;
    border: 0;
    font-weight: bold;
    padding: 10px 20px;
    background: #262626;
    color: #ffffff;
    font-size: 15px;
    border-radius: 0.31em;
    margin: 10px 0px;
    opacity: .4;
    transition: .8s;
    
}

.btn:hover {
    background-color:rgba(26,26,26,.4);
  box-shadow: 0 0 0 3px rgba(53, 37, 152, 0.5);
  
    
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>


 <a href="#" class="btn">Leer más <i class="fas fa-angle-double-right"></i></a>

</body>
</html>

不悬停时反向过渡

Reverse transition while not hovering

html

css

hover

frontend

transition