html - 如何对两个不同的CSS属性使用两个缓入效果？

我无法弄清楚如何同时简化div的不透明度和转换。
如果我使用过渡：转换1s缓入；和过渡：不透明度1s缓入同一div无效，因此我只能缓入c之一
同时具有CSS属性。

这是我的div HTML：

<div id="box1" class="normal">

        <h2>Home</h2>

</div>

我使用Jquery来更改单击类：

$(document).ready(function(){
                $(".normal").click(function(){
                    var thisobj =  $(this);
                    if(thisobj.hasClass("active"))
                    {
                        $(this).removeClass("active");
                    }else
                    {
                        $(this).addClass("active");
                    }
                });
            });

这是我的CSS：

.normal{position: fixed;
z-index: 20;
text-align: center;
width: 100%;
height: 35%;
background-image:url(images/box1.jpg);
background-repeat:no-repeat;
background-size: cover;
-webkit-box-shadow: 0px -1px 34px 10px rgba(0,0,0,1);
-moz-box-shadow: 0px -1px 34px 10px rgba(0,0,0,1);
box-shadow: 0px -1px 34px 10px rgba(0,0,0,1);
top: 62%;
transform: translateY(0%);
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
transition: transform 1s ease-in-out;
}

.active{ position: fixed;
z-index: 20;
text-align: center;
width: 100%;
height: 35%;
background-image:url(images/box1.jpg);
background-repeat:no-repeat;
background-size: cover;
-webkit-box-shadow: 0px -1px 34px 10px rgba(0,0,0,1);
-moz-box-shadow: 0px -1px 34px 10px rgba(0,0,0,1);
box-shadow: 0px -1px 34px 10px rgba(0,0,0,1);
top: 62%;
transform: translateY(-105%);
filter: alpha(opacity=1);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
transition: transform 1s ease-in-out;
}

.normal:hover{
position: fixed;
z-index: 20;
text-align: center;
width: 100%;
height: 35%;
background-image:url(images/box1.jpg);
background-repeat:no-repeat;
background-size: cover;
-webkit-box-shadow: 0px -1px 34px 10px rgba(0,0,0,1);
-moz-box-shadow: 0px -1px 34px 10px rgba(0,0,0,1);
box-shadow: 0px -1px 34px 10px rgba(0,0,0,1);
top: 62%;
transform: translateY(-10%);
filter: alpha(opacity=1);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
transition: transform 1s ease-in-out;

}

.active:hover{
position: fixed;
z-index: 20;
text-align: center;
width: 100%;
height: 35%;
background-image:url(images/box1.jpg);
background-repeat:no-repeat;
background-size: cover;
-webkit-box-shadow: 0px -1px 34px 10px rgba(0,0,0,1);
-moz-box-shadow: 0px -1px 34px 10px rgba(0,0,0,1);
box-shadow: 0px -1px 34px 10px rgba(0,0,0,1);
top: 62%;
transform: translateY(-105%);
transition: transform 1.0s ease;
filter: alpha(opacity=1);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;

}

所以缓动适用于翻译-y，但我不知道如何为其他属性添加第二个缓入效果...

如果您将鼠标悬停在.normal上，我想缓解不透明的问题。

我希望你们中的一个能帮助我。
这是我正在从事的网站：
http://www.felixgeerts.tk
我今年16岁，来自荷兰，所以请不要介意我的英语不好。 :)

感谢您的帮助！

最佳答案

transition代码仅引用transform属性，将transition设置为all并查看是否有效。