Estoy realizando una animación la cual debería hacer que un card se mueva de un lugar a otro presionando el card, pero estoy teniendo un problema y es que quiero que cuando llegue al final de la animación ese card se expanda al estilo de un modal, pero al momento de realizar el final de la animación este sigue siendo del mismo tamaño y no encuentro forma de hacer ese tipo de animación, intente con dos animaciones a la vez pero estas cambian de forma muy extrañas.
Este es mi card:
const abrir = e => {
e.classList.add('diseñar')
}
.card {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
width: 100%;
border-radius: 0.4rem;
box-shadow: 2px 5px 4px gray;
transition: .3s;
}
.card:hover {
cursor: pointer;
transform: scale(1.06);
}
.card-img {
width: 50%;
}
.card-img>img {
width: 100%;
height: 10.6rem;
object-fit: fill;
}
.card-content{
width: 50%;
color: gray;
padding: 1rem;
font-size: .7rem;
}
.content-date {
display: flex;
justify-content: space-between;
font-weight: bold;
}
.card-content__botton {
margin-top: 1rem;
text-align: center;
}
.card-content__botton>button {
text-decoration: none;
border: 1px solid red;
text-align: center;
background-color: red;
color: white;
border-radius: .3rem;
padding: .5rem 1rem;
}
.diseñar {
animation: forwards 2s centrar;
}
@keyframes centrar {
0% {
margin: 0;
}
50% {
margin-top: 300px;
}
100% {
display: flex;
justify-content: center;
align-items: center;
margin-top: 300px;
width: 950px;
height: 10rem;
}
}
<div class="card" id="letra" onclick="abrir(this);">
<div class="card-img">
<img src="capablanca.jpg" alt="capablanca">
</div>
<div class="card-content">
<div class="content-date">
<div class="content-date__title">
<span>Ganador de Torneo</span>
</div>
<div class="content-date__date">
<span>26 de Octubre del 21</span>
</div>
</div>
<div class="card-content__content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis voluptatum quasi corrupti aliquam delectus perferendis et ea asperiores, neque quam alias aut totam aperiam quod accusantium mollitia, reprehenderit hic omnis.
</div>
</div>
</div>