Анимация png картинки

.icon { 
  position: relative; 
  width: 66px; 
  height: 77px; 
  height:  
  font-size: 0; 
} 
 
.icon_container { 
  position: absolute; 
  top: auto; 
  bottom: 0; 
  left: 0; 
  width: 100%; 
  height: 0; 
  min-height: 100%; 
  font-size: 0; 
  overflow: hidden; 
  animation: colorizeOut 1.5s linear infinite; 
} 
 
.icon_container__yellow { 
  top: 0; 
  bottom: auto; 
  animation: colorizeIn 1.5s linear infinite; 
} 
 
.icon_image { 
  position: absolute; 
  top: auto; 
  bottom: 0; 
  width: 100%; 
} 
 
.icon_container__yellow .icon_image { 
  top: 0; 
  bottom: auto; 
} 
 
@keyframes colorizeIn { 
	0% { min-height: 0; } 
	100% { min-height: 77px; } 
} 
 
@keyframes colorizeOut { 
	0% { min-height: 77px; } 
	100% { min-height: 0; } 
}

<div class="icon"> 
  <div class="icon_container"> 
    <img src="//i.imgur.com/Ou00Phd.png" class="icon_image"> 
  </div> 
  <div class="icon_container icon_container__yellow"> 
    <img src="//i.imgur.com/yCnqsy6.png" class="icon_image"> 
  </div> 
</div>

body { 
  margin: 0; 
  padding: 0; 
} 
 
div.wrapper-for-image { 
  position: relative; 
} 
 
div { 
  width: 66px; 
  height: 77px; 
} 
 
div.back { 
  position: absolute; 
  background: url(https://i.stack.imgur.com/7lSyw.png) no-repeat; 
} 
 
div.front { 
  position: absolute; 
  -webkit-mask: url(https://i.stack.imgur.com/7lSyw.png) no-repeat; 
  background: linear-gradient(yellow, #504f4f) no-repeat; 
  background-position: 0px -77px; 
  background-size: 100%; 
  transition: background-position 1s ease 0s, background-size 1s ease 0s; 
} 
 
div.front:hover { 
  background-position: 0px 0px; 
  background-size: 200%; 
}

<div class="wrapper-for-image"> 
  <div class="back"></div> 
  <div class="front"></div> 
</div>

.b{ 
  display: inline-block; 
  vertical-align: middle; 
  border: 1px solid #ccc; 
  position: relative; 
} 
.b:before{ 
  content: ''; 
  position: absolute; top: 0; left: 0; 
  z-index: 1; 
  width: 100%; 
  height: 0; 
  background: url(http://static.wixstatic.com/media/4b5ed0_f915a7d25461495bb9008e09fe48a446.png) no-repeat 0 0; 
  -webkit-filter: hue-rotate(180deg); 
  filter: hue-rotate(180deg); 
  animation: animPicture 3s linear infinite; 
 } 
  
@keyframes animPicture{ 
  0{ 
    height: 0; 
  }  
  99%{     
     -webkit-filter: hue-rotate(0); 
  filter: hue-rotate(0); 
  } 
  100%{ 
    height: 100%;    
  } 
   
}

<div class="b"> 
  <img src="http://static.wixstatic.com/media/4b5ed0_f915a7d25461495bb9008e09fe48a446.png" alt="" /> 
</div>