Implement Icon morph animation in Javascript/CSS? -

see video

(hd video here)

i wondering whether there easier way implement in javascript/css.

i know there css3 attributes transition, animation, transform , on, know, none of these attributes can transform 1 icon , provide delicate effect top-left , top-right ones in video above.

does have ideas may solution implement this?

right, have come similar show sort of thing possible via css only. notice differences, of maybe way coded point.

so here is!

note: stackoverflow's code snippets don't css properties , not run them. best viewed on codepen here.

@import url(http://fonts.googleapis.com/css?family=lato:100,300,400,700);   body {    font-family: 'lato', sans-serif;    background: #222;  }  .grid {    width: 600px;    height: 600px;    border: 1px solid;    margin: 0 auto;  }  .box {    width: 50%;    height: 50%;    float: left;    position: relative;  }  .box:nth-child(1) {    background: #01ff70;  }  .box:nth-child(2) {    background: #ffdc00;  }  .box:nth-child(3) {    background: #0074d9;  }  .box:nth-child(4) {    background: #ff4136;    line-height: 300px;  }  /* ham burger */    .hamburger {    width: 110px;    height: 16px;    background: #fff;    position: absolute;    top: 0;    bottom: 0;    left: 0;    right: 0;    margin: auto;    animation: spin 5s infinite;  }  .hamburger:before,  .hamburger:after {    content: "";    width: 110px;    height: 16px;    background: #fff;    position: absolute;    left: 0;  }  .hamburger:before {    top: -42px;    animation: translatebefore 5s infinite;  }  .hamburger:after {    bottom: -42px;    animation: translateafter 5s infinite;  }  @keyframes translatebefore {    20% {      transform: rotate(45deg);      width: 60px;      left: 52px;      top: -24px;    }    40% {      transform: rotate(45deg);      width: 60px;      left: 52px;      top: -24px;    }    60% {      transform: rotate(0deg);      width: 110px;      left: 0;      top: -42px;    }  }  @keyframes translateafter {    20% {      transform: rotate(-45deg);      width: 60px;      left: 52px;      bottom: -24px;    }    40% {      transform: rotate(-45deg);      width: 60px;      left: 52px;      bottom: -24px;    }    60% {      transform: rotate(0deg);      width: 110px;      left: 0;      bottom: -42px;    }  }  @keyframes spin {    20% {      transform: rotate(180deg);    }    40% {      transform: rotate(180deg);    }    60% {      transform: rotate(360deg);    }    100% {      transform: rotate(360deg);    }  }  /* end of ham burger */    /* refresh */    .refresh {    width: 100px;    height: 100px;    border: 16px solid transparent;    border-top-color: #fff;    border-left-color: #fff;    border-radius: 50%;    position: relative;    transform: rotate(-45deg);    position: absolute;    top: 0;    bottom: 0;    left: 0;    right: 0;    margin: auto;    animation: refreshspin 1s infinite linear;  }  .refresh:before {    content: "";    width: 0;    height: 0;    border-left: 30px solid #fff;    border-top: 30px solid transparent;    border-bottom: 30px solid transparent;    position: absolute;    top: -16px;    left: 80%;    transform: rotate(45deg);  }  @keyframes refreshspin {    100% {      transform: rotate(315deg);    }  }  /* end of refresh */    /* numbers */    .plus,  .num1,  .num2 {    display: inline-block;    font-size: 100px;    color: #fff;  }  .plus {    animation: plusspin 5s infinite;    margin-left: 30%;  }  .num1 {    position: relative;    animation: num1effect 5s infinite;    padding-left: 20px;  }  .num2 {    position: absolute;    top: 0;    background: #ff4136;    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);    animation: num2effect 5s infinite;  }  @keyframes num2effect {    30% {      clip-path: polygon(100% 100%, 100% 0%, 100% 100%, 0% 100%);    }    70% {      clip-path: polygon(100% 100%, 100% 0%, 100% 100%, 0% 100%);    }  }  @keyframes num1effect {    30% {      padding-left: 0px;    }    70% {      padding-left: 0px;    }  }  @keyframes plusspin {    20% {      transform: rotate(90deg);    }    70% {      transform: rotate(90deg);    }    90% {      transform: rotate(0deg);    }  }  /* end of numbers */    /* icons */    .icons {    width: 120px;    height: 120px;    background: #fff;    position: absolute;    top: 27%;    left: 27%;    animation: spinicon 5s infinite;  }  .icons:after {    content: "";    display: block;    height: 100%;    width: 0px;    background: #ffdc00;    margin: 0 auto;    animation: spiniconmiddle 5s infinite;  }  @keyframes spiniconmiddle {    33% {      width: 0;    }    66% {      width: 30px;    }    100% {      width: 0px;    }  }  @keyframes spinicon {    33% {      transform: rotate(90deg);    }    66% {      transform: rotate(180deg);    }    100% {      transform: rotate(270deg);    }  }  /* end of icons */

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>  <div class="grid">    <div class="box">      <div class="hamburger"></div>    </div>    <div class="box">      <div class="icons"></div>    </div>    <div class="box">      <div class="refresh"></div>    </div>    <div class="box">      <div class="plus">+</div>      <div class="num1">        <div class="num2">2</div>1      </div>      </div>  </div>

if there questions please asked.

---

further notes:

• i couldn't think of way create triangle in top right without using svg. left part out.
• this using clip-path, not support of yet. see more here.
• the script added make prefix free.
• created in chrome, therefore best viewed in chrome. near perfect, prove can done.