CSS drop animation with stationary shadow

Question

I'm looking to make a "stamping" animation, and have got to the following point:

div {
  height: 75px;
  width: 75px;
  background-color: brown;
  border: 4px dashed black;
  border-radius: 50%;
  position: absolute;
  left: 200px;
  top: 40px;
  overflow: hidden;
  animation: drop 3s forwards;
}

@keyframes drop {
  from {
    opacity: .25;
    transform-origin: 50% 50%;
    transform: rotate(25deg) scale(5) translate(-40px, 70px);
    transition: all ease-in;
    filter: drop-shadow(-4px -20px 4px black);
  }
  to {
    opacity: .8;
    transform: rotate(-15deg) scale(1);
    filter: drop-shadow(0 4px 4px black);
  }
}

<div></div>

The shadow is looking ok, but I've thought it'd be cool if there's a way to make so it is stationary, big and blurry at first, but as the circle comes closer it gets more refined- Like having a silhouette of where the stamp is going to hit/land(like in video games).

How can one manage to achieve that? And for that matter, is that good UX?

The app I want to use it for is in Angular, so a solution using Angular's animations(or plain javascript) is also fine.

score 1 · Accepted Answer · answered Nov 18 '19 at 20:33

Is this what you're going for? Just set the drop shadow offset as the translate you've defined: -40px, 70px

div {
  height: 75px;
  width: 75px;
  background-color: brown;
  border: 4px dashed black;
  border-radius: 50%;
  position: absolute;
  left: 200px;
  top: 40px;
  overflow: hidden;
  animation: drop 3s forwards;
}

@keyframes drop {
  from {
    opacity: .25;
    transform-origin: 50% 50%;
    transform: rotate(25deg) scale(5) translate(-40px, 70px);
    transition: all ease-in;
    
    filter: drop-shadow(40px -70px 20px black);
  }
  to {
    opacity: .8;
    transform: rotate(-15deg) scale(1);
    filter: drop-shadow(0 4px 4px black);
    
  }
}

<div></div>

CSS drop animation with stationary shadow

1 Answers1