Colliding Ball Redux

Redid the animations to use transitions with tricky delays instead of timelines (which don't reverse as nicely IMO).

by nilloc

HTML

<div class="wrapper">
  <a href="#" class="collision">Hover Me!</a>
</div>

CSS

*{
  box-sizing:border-box;
  margin:0px;
  padding:0px;
}

.wrapper{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  height:100vh;
  background:black;
}

a.collision{
  line-height:70px;
  height:70px;
  width:200px;
  border:1px solid white;
  text-align:center;
  position:relative;
  z-index:1;
  font-family:Helvetica;
  font-weight:Bold;
  text-decoration:none;
  color:white;
  display:block;
  overflow:hidden;
}

a.collision::before,
a.collision::after{
  --dot-size:20px;
  content:'';
  position:absolute;
  top:50%;
  height:var(--dot-size);
  width:var(--dot-size);
  background-color:magenta;
  z-index:-1;
  border-radius:50%;
  transform: translate(-50%, -50%);
  
  --transition-duration:400ms;
  
  transition-property:
  left, 
  right, 
  height, 
  width;

  transition-delay: 
  var(--transition-duration), 
  var(--transition-duration),
  0s, 
  0s;
  transition-duration:
  var(--transition-duration);
  transition-timing-function:
  linear,
  linear,
  ease-in,
  ease-in;
}

a.collision::before{
  left:calc(var(--dot-size) * -1);
}
a.collision::after{
  left:calc(100% + var(--dot-size));
}

a.collision:hover::before,
a.collision:hover::after{
  left:50%;
  height:400px;
  width:400px;
  
  transition-delay:
  0s, 
  0s, 
  var(--transition-duration), 
  var(--transition-duration);
  transition-timing-function:
  ease-in,
  ease-in,
  linear,
  linear;
}