title: Transition delay for two diferent elements reverse when hover out
body: <p>I need a transition where the hover sequence is ABBA instead of ABAB.</p>
  
  <p>Here's a fiddle I made to demo this:</p>
  
  <p><a href="https://jsfiddle.net/m8vrLtx7/1/" rel="nofollow noreferrer">https://jsfiddle.net/m8vrLtx7/1/</a></p>
  
  <p>This is the code:</p>
  
  <pre><code>div{
    height: 10rem;
    width: 10rem;
    background: red;
    border-radius: 100%;
    margin: 3rem;
    position: relative;
  }
  
  div:before,
  div:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 100%;
    transform: scale(0);
    transition: transform .3s;
  }
  
  div:after{
    background: blue;
    z-index: 1;
  }
  
  div:before{
    width: calc(100% - 1rem);
    height: calc(100% - 1rem);
    top: .5rem;
    left: .5rem;
    background: pink;
    z-index: 2;
    transition-delay: .1s;
  }
  
  div:hover:before,
  div:hover:after{
    transform: scale(1);
  }
  </code></pre>
  
  <p>What I need is the inner circle (the pink one) to animate last, but on hover out I want it to go first.</p>
  
  <p>Is there any way to do this, CSS only?</p>