我正在try 让下面的代码顺利地从底部:0过渡到顶部:0.我知道转换只适用于相同的属性，但我现在不知道如何顺利地完成它.下面是有问题的代码:
.portCard * {
max-width: 100%;
transition: .35s .35s transform cubic-bezier(.1,.72,.4,.97);
}
.portCard {
position: relative;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
max-width: 250px;
}
.portCardContent {
position: absolute;
left: 50%;
transform: translate(-50%, 0px);
width: 100%;
text-align: center;
background-color: #86B971;
z-index: 1;
bottom: 0;
height: auto;
}
.portCard:hover .portCardContent {
top: 0;
bottom: auto;
}
.portCardTitle {
font-size: 1.2em;
font-weight: 700;
}
.portCardText {
font-size: .8em;
}
.portCardLink {
display: none;
} <div class="portCard">
<img src="https://images.unsplash.com/photo-1586511925558-a4c6376fe65f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=60" alt="">
<div class="portCardContent">
<h3 class="portCardTitle">
Make your <span>choice</span> right now!
</h3>
<p class="portCardText">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officia quisquam doloremque nostrum laboriosam, blanditiis libero corporis nulla a aut?</p>
<a href="#" class="portCardLink">
<span>Learn How</span>
</a>
</div>
</div>