Question

我的转换功能不起作用，我正在使用最新的Chrome浏览器，当我将鼠标悬停在按钮上时，转换功能正在进行，但转换过程只是立即关闭。

我的CSS

.btn{
    border-radius: 5px;
        padding: 15px 25px;
        font-size: 22px;
        text-decoration: none;
        margin: 20px;
        color: #fff;
        position: relative;
        display: inline-block;

    }
    .btn:active{
        transform: translate(0px, 5px);
        -webkit-transform: translate(0px, 5px);
        box-shadow: 0px 0px 0px 0px;
    }
    .blue{
        background-color: #55acee;
        box-shadow: 0px 5px 0px 0px #3C93D5;    
    }
    .blue:hover{
        background-color: #6FC6FF;
        transition-duration: .02s;
        display: inline-block;
    }
}

HTML就在JSFiddle上。

Answer 1

您需要将转换置于基本状态而不是:hover，然后它将在所有状态之间转换。

.blue {
    background-color: #55acee;
    box-shadow: 0px 5px 0px 0px #3C93D5;
    transition: background-color 0.2s ease-out;
}

.btn {
  border-radius: 5px;
  padding: 15px 25px;
  font-size: 22px;
  text-decoration: none;
  margin: 20px;
  color: #fff;
  position: relative;
  display: inline-block;
}
.btn:active {
  transform: translate(0px, 5px);
  -webkit-transform: translate(0px, 5px);
  box-shadow: 0px 0px 0px 0px;
}
.blue {
  background-color: #55acee;
  box-shadow: 0px 5px 0px 0px #3C93D5;
  transition: background-color 0.2s ease-out;
}
.blue:hover {
  background-color: #6FC6FF;
  display: inline-block;
}

<div id="buttons">	<a href="#" class="btn blue">Blu</a>
</div>

Answer 2

您正在向：悬停状态添加转换，而不是向实际元素添加转换。通常最好定义元素本身的转换，然后将属性更改为它的状态，这样它就会理解无论状态如何变化，它都应该从一个转换到另一个。

.btn{
    transition: background-color 0.2s ease-out;
}
.btn:active{
    ...
}
.btn:hover{
    ...
}

Answer 3

你只需要在你的btn主类

上插入它

.btn{
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s  ease-in-out;
    transition: all 0.2s ease-in-out;
}

我的转换不起作用

3 个答案: