title: CSS animations - turning magnifying glass icon into cross
body: <p>I am trying to make a magnifying glass transition into cross icon with css animations by following one example. It is the first time I am working with animations and I can't figure out how to put the handle below the magnifying glass. Here is the <a href="https://jsfiddle.net/j624wsas/11/" rel="nofollow noreferrer">fiddle</a>. And this is the <a href="https://codepen.io/thusslack/pen/vEYxoE?page=1&amp;" rel="nofollow noreferrer">demo</a> of the original.
  This is the html:</p>
  
  <pre><code>&lt;div id="magnifier"&gt;
  
    &lt;div class="magnifier-icon"&gt;
      &lt;span class="magnifier-handle"&gt;&lt;/span&gt;
      &lt;span class="magnifier-handle-x"&gt;&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this is the css:</p>
  
  <pre><code>// vars
  $color-white: #fff;       // icon color
  $color-bg: #b0e1be;   // background color
  $animation: .5s;    // animation speed
  $scale: 0.1;              // icon scale 68/68 default
  
  $dimensions-open: 28px;
  $dimensions-close: 36px;
  
  
  *, *:before, *:after {
    box-sizing: border-box;
  }
  
  // spacing + background-color
  body {
    background: $color-bg;
    padding: 40px;
    font-family: roboto, sans-serif;
  }
  
  .magnifier-icon {
    display: block;
    position: relative;
    cursor: pointer;
    opacity: 1;
    transition: opacity 2s;
  
    &amp;:before {
      content: "";
      display: block;
      border: 3px solid $color-white;
  
      width: $dimensions-open; 
      height: $dimensions-open; 
      border-radius: $dimensions-open*.5;
  
      animation: open $animation ease 0s 1 forwards;
    }
  
    &amp;.is-open:before {    
      animation: close $animation*.5 ease $animation*.5 1 forwards;
    }
  }
  
  .magnifier-handle,
  .magnifier-handle-x {
    content: "";
    display: block;
    width: 25px;
    height: 3px;
    transform: rotate(45deg);
    background: $color-white;
    position: absolute;
    top: 85px;
    left: 45px;
    animation: x-stroke-out $animation ease 0s 1 forwards;
  
    .is-open &amp; {
      animation: x-stroke-in $animation ease 0s 1 forwards;
    }
  }
  .magnifier-handle-x {
    animation: x-stroke-turn-out $animation ease 0s 1 forwards;
    .is-open &amp; {
      animation: x-stroke-turn $animation ease 0s 1 forwards;
    }
  }
  
  @keyframes close {
    0%   { border-radius: $dimensions-open*.5; width: $dimensions-open; height: $dimensions-open; }
    80%  { border-radius: $dimensions-close*.5; width: $dimensions-close; height: $dimensions-close; }
    100% { border-radius: $dimensions-close*.5; width: $dimensions-close; height: $dimensions-close; }
  }
  @keyframes open {
    0%   { border-radius: $dimensions-close*.5; width: $dimensions-close; height: $dimensions-close; }
    20%  { border-radius: $dimensions-close*.5; width: $dimensions-close; height: $dimensions-close; }
    100% { border-radius: $dimensions-open*.5; width: $dimensions-open; height: $dimensions-open; }
  }
  
  @keyframes x-stroke-in {
    0%   { top: 45px; left: 35px; }
    80%  { top: 33px; left: 15px; width: 40px; height: 4px; }
    100% { top: 33px; left: 15px; width: 40px; height: 4px; }
  }
  @keyframes x-stroke-out {
    100% { top: 45px; left: 35px; }
    30%  { top: 33px; left: 15px; width: 40px; height: 4px; }
    0%   { top: 33px; left: 15px; width: 40px; height: 4px; }
  }
  
  @keyframes x-stroke-turn {
    0%   { top: 45px; left: 35px; }
    70%  { top: 33px; left: 15px; height: 4px; transform: rotate(45deg); }
    85%  { transform: rotate(145deg); }
    100% { top: 33px; left: 15px; height: 4px; width: 40px; transform: rotate(135deg); }
  }
  @keyframes x-stroke-turn-out {
    100% { top: 45px; left: 35px; }
    30%  { top: 33px; left: 15px; height: 4px; transform: rotate(45deg); }
    15%  { transform: rotate(145deg); }
    0%   { top: 33px; left: 15px; height: 4px; width: 40px; transform: rotate(135deg); }
  }
  </code></pre>
  
  <p>How can I do that,I have tried by changing the values of <code>top</code> and <code>left</code> properties <code>magnifier-handle-x</code> but that didn't help.</p>