html - 如何为两个不同的 css 属性使用两个缓入缓出效果？

Question

我无法弄清楚如何同时轻松输入 div 的不透明度和 translate-y。如果我使用 transition: transform 1s ease-in-out;和 Transition: opacity 1s ease-in-out 对于同一个 div 它不起作用所以我只能 ease-in-out 其中一个 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;

所以 ease 对 translate-y 有效，但我不知道如何为不同的属性添加第二个 ease-in-out 效果...

如果您将鼠标悬停在 .normal 上，我想缓和不透明度。

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

谢谢你帮助我!

Answer 1

transition代码只是引用了transform属性，设置transition为all，看看是否行得通。