Tricky CSS Positioning Animation

I'm learning about CSS animations and am trying to animate this stamp which uses relative and absolute positioning. I want the animation to:

1)Start at it's original size. 2)Grow 2-3xs that size and be at the center of the screen. 3)Pause for 2-3 seconds seconds. 4) Shrink back down to it's original size and spot.

The problem I'm running into is keeping the elements positioned on top of the stamp in the same place as the transitions occur. Looking to keep it pure CSS if possible (*side note I haven't added any web-kit/browser support yet because I'm just trying to make it work first).

Here is the code:

<div class="park-stamp">      <img src="https://res.cloudinary.com/saveallthethings/image/upload/v1614633821/daniel-burka-X_IwSPO2GH0-unsplash_zvoyst.jpg" class="park-img"/>    <div class="stampText">      <div class="park-name">Zion</div>      <div class="park-title">National Park</div>    </div>  </div>    

* {margin: 0;    padding: 0;    box-sizing:border-box;  }    body {    display:flex;    height:90vh;    justify-content:flex-end;    align-items:flex-start;      background: grey;  }      .park-img{    width: 10rem;      height: 11.2rem;      display: inline-block;    margin-left:2px;    padding:10px;      background: white;      position: relative;    top:2rem;    left:-2rem;      /*-webkit-filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.5));      /*The stamp cutout will be created using crisp radial gradients*/      background: radial-gradient(          transparent 0px,           transparent 4px,           white 4px,          white      );          /*reducing the gradient size*/      background-size: 20px 20px;      /*Offset to move the holes to the edge*/      background-position: -10px -10px;        /*Animation*/    animation: stampAnimation 9s ease-in-out;     }    @keyframes stampAnimation {    0%{}    50%{      transform:scale(3,3) translate(-35%, 35%);        }    75%{      transform:scale(3,3) translate(-35%, 35%);        }  }            .stampText{    position:relative;    top:-1rem;    left:-1.8rem;    display:flex;    justify-content:center;    align-items:center;    flex-direction:column;    color:#fafafa;    text-transform:uppercase;    animation: stampAnimation 9s ease-in-out;  }    .park-name{      font-weight:bold;      text-align:center;      font-size:1rem;  }      .park-title{       width: 90%;      overflow: hidden;      text-align: center;      font-size:.5rem;  }      .park-title:before,  .park-title:after {      background-color: #fafafa;      content: "";      display: inline-block;      height: 1px;      position: relative;      vertical-align: middle;      width: 10%;  }      .park-title:before {      right: 0.5rem;      margin-left: -50%;  }      .park-title:after {      left: 0.5rem;      margin-right: -50%;  }    

As well as the codepen:

https://codepen.io/aspirationalhobbit/pen/GRNPqxw?editors=0100

https://stackoverflow.com/questions/66575798/tricky-css-positioning-animation March 11, 2021 at 10:50AM