coffee mug simple svg animation

md.shakil hossain

1745

simple svg animation

 <div class="iconDiv">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" width="178px" height="178px" viewBox="0 0 178 178" version="1.1">
  <defs/>
  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
    <g id="Desktop-HD" sketch:type="MSArtboardGroup" transform="translate(-687.000000, -226.000000)">
      <g id="CupIcon" sketch:type="MSLayerGroup" transform="translate(687.000000, 226.000000)">
        <circle id="Oval-19" fill="#FB2511" sketch:type="MSShapeGroup" cx="89" cy="89" r="89"/>
        <g id="cup-copy-2" transform="translate(55.000000, 37.000000)" sketch:type="MSShapeGroup">
          <path d="M7.83184846 26.0557718L3.19565842 26.0557718 0.783275933 36.695407 5.93281406 36.695407 13.2946572 120.391105 55.4121047 120.391105 62.6140803 36.695407 62.6140803 36.695407 68.2932195 36.695407 66.1912582 26.0557718 60.8074339 26.0557718 58.7984207 19.5529146 9.88093081 19.5529146 7.83184846 26.0557718 7.83184846 26.0557718ZM11 21L58 21 59.3739786 25.6842475 9.45027256 25.6842475 11 21ZM4.80334693 27L64.6890687 27 65.8372239 30 3.97176099 30 4.80334693 27ZM3.7693547 31L65.7598392 31 66.8852206 35 2.67055237 35 3.7693547 31ZM7.58792634 36.9821309L61.353929 36.9821309 54.1236127 119.18927 14.647106 119.18927 7.58792634 36.9821309Z" id="Rectangle-9" fill="#FFFFFF"/>
          <path class="heat1" d="M23.319671 15.3825055C17.0835717 6.53547349 28.6618305 5.7724612 22.4367799 0.536680597" id="heat1" stroke="#FFFFFF" stroke-width="2"/>
          <path class="heat2" d="M46.6455137 15.3825055C40.4094144 6.53547349 51.9876732 5.7724612 45.7626226 0.536680597" id="heat2" stroke="#FFFFFF" stroke-width="2"/>
          <path class="heat3" d="M34.9825924 15.3825055C28.7464931 6.53547349 40.3247519 5.7724612 34.0997013 0.536680597" id="heat3" stroke="#FFFFFF" stroke-width="2"/>
        </g>
      </g>
    </g>
  </g>
</svg>
</div>

Try it Yourself >>

 .iconDiv{
  width:100%;
  text-align:center;
}

.icon{
  margin-top:50px;
  width:30%;
}

@-webkit-keyframes ani1{
  0% {stroke:#FB2511;}
  50% {stroke:white;}
  100% {stroke:#FB2511;}
}

.heat1{
  animation-name:ani1;
  animation-duration:3s;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
  animation-delay:3s;
  animation-fill-mode:backwards;
}


@-webkit-keyframes ani2{
  0% {stroke:#FB2511;}
  50% {stroke:white;}
  100% {stroke:#FB2511;}
}

.heat2{
  animation-name:ani2;
  animation-duration:5s;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
  animation-delay:4s;
  animation-fill-mode:backwards;

}

@-webkit-keyframes ani3{
  0% {stroke:#FB2511;}
  50% {stroke:white;}
  100% {stroke:#FB2511;}
}

.heat3{
  animation-name:ani3;
  animation-duration:4s;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
  animation-delay:5s;
  animation-fill-mode:backwards;
}

Try it Yourself >>