Quiero expandir el div al hacer clic. Una idea es que el div comience a expandirse hasta su altura y ancho de página completa a partir de la posición del div antes de que comience a expandirse.
Sé que no te lo expliqué claramente, pero espero que mi código actual te ayude a entender.
Quiero que el div se expanda desde su posición actual para llenar la página completa. Casi funciona, pero funciona desde la posición que configuré en la animación.
¿Tiene alguna idea de cómo puedo recibir la posición actual del div en Javascript y establecer ese valor como punto de partida de la animación?
$(document).ready(function() { $('.about').click(function() { $('.about').addClass('active'); $('.about').removeClass('border'); }) $('.projects').click(function() { $('.projects').addClass('active'); $('.projects').removeClass('border'); }) }) .hero { position: relative; width: 100%; height: calc(100vh - 150px); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1.5em; } .border { border-radius: 15px; border: 1px solid #000; cursor: pointer; } .about { grid-row: 1/2; background-color: chocolate; } .projects { grid-row: 1/3; grid-column: 2/3; background-color: cyan; } #grid-split { grid-row: 2/3; grid-column: 1/2; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5em; } @keyframes expand { 0% { width: 0vw; height: 0vh; top: 20%; left: 20%; } 100% { width: 100vw; height: 100vh; top: 0; left: 0; } } .about.active { position: fixed; top: 0; left: 0; z-index: 100; animation: expand .5s ease-in; width: 100vw; height: 100vh; } .projects.active { position: fixed; top: 0; left: 0; z-index: 100; animation: expand .5s ease-in; width: 100vw; height: 100vh; } <div class="hero"> <div class="about border"></div> <div class="projects border"></div> <div id="grid-split"> <div class="contact border"></div> <div class="process border"></div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>