转换CSS时出现转换错误_Css_Animation_Transition

转换CSS时出现转换错误

css animation

转换CSS时出现转换错误,css,animation,transition,Css,Animation,Transition,我已经问了一个关于过渡的问题，但这次我不得不做一些更难的事情，我又一次遇到了过渡的问题，老实说，我不知道为什么它不起作用。我做了一些国王的“酒吧”，反正像一个界面的东西，基本上是一个按钮加上。当您将指针悬停在按钮上时，它将上升并显示其他元素，以及转换。当我将鼠标悬停在外时，仅对带有加号（trigger1）的按钮进行转换，而不对其他超链接进行转换。为什么？下面是代码： html 非常感谢你的帮助这是因为当.trigger元素未悬停时，您在元素上设置了可见性：hidden。看起来他们不是在过

我已经问了一个关于过渡的问题，但这次我不得不做一些更难的事情，我又一次遇到了过渡的问题，老实说，我不知道为什么它不起作用。我做了一些国王的“酒吧”，反正像一个界面的东西，基本上是一个按钮加上。当您将指针悬停在按钮上时，它将上升并显示其他元素，以及转换。当我将鼠标悬停在外时，仅对带有加号（trigger1）的按钮进行转换，而不对其他超链接进行转换。为什么？
下面是代码： html

非常感谢你的帮助

这是因为当

.trigger

元素未悬停时，您在元素上设置了

可见性：hidden

。看起来他们不是在过渡，但实际上，他们只是在消失

这就是你想做的吗？对不起，我忘了做那件事，反正我现在已经做了，再次感谢你的帮助。

<html>
    <head>
        <title>Web Interface Test</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="/interface.css" />
    </head>
    <body>
        <div class="trigger">
        <div class="div">
            <center>
            <span class="text">+</span>
            </center>
        </div>
            <a class="element" href="#"></a>
            <a class="element2" href="#"></a>
            <a class="element3" href="#"></a>
        </div>
    </body>
</html>

.div {
    width: 50px;
    height: 50px;
    bottom: 5%;
    right: 5%;
    background: black;
    transition: transform 300ms ease-in-out;
    position: fixed;
    z-index: 5;
    border-radius: 50%;
    visibility: visible;
}
.trigger:hover .div {
    transform: translate(0px, -200px) rotate(45deg);
}
.trigger {
    width: 50px;
    height: 50px;
    background: red;
    position: absolute;
    bottom: 5%;
    right: 5%;
    position: fixed;
    z-index: 4;
    border-radius: 50%
}
.element {
    width: 50px;
    height: 50px;
    bottom: 5%;
    right: 5%;
    background: indigo;
    transition: transform 300ms ease-in-out;
    position: fixed;
    z-index: 3;
    visibility: hidden;
    border-radius: 50%;
}
.trigger:hover .element {
    transform: translate(0px, -50px);
    visibility: visible;
}
.element2 {
    width: 50px;
    height: 50px;
    bottom: 5%;
    right: 5%;
    background: yellow;
    transition: transform 300ms ease-in-out;
    position: fixed;
    z-index: 3;
    visibility: hidden;
    border-radius: 50%;
}
.trigger:hover .element2 {
    transform: translate(0px, -100px);
    visibility: visible;
}
.element3 {
    width: 50px;
    height: 50px;
    bottom: 5%;
    right: 5%;
    background: blue;
    transition: transform 300ms ease-in-out;
    position: fixed;
    z-index: 3;
    visibility: hidden;
    border-radius: 50%;
}
.trigger:hover .element3 {
    transform: translate(0px, -150px);
    visibility: visible;
}
.text {
    color: white;
    font-size: 40px;
    top:
}