Play multiple CSS animations at the same time

http://stackoverflow.com/questions/26986129/play-multiple-css-animations-at-the-same-time/26986205#comment42507479_26986205

by Sergey khorev

HTML

width="120" height="120"
<div>
  <img class="image" src="https://xwallet.pundix.com/img/ShdowLight.2cdc1b1f.svg" alt=""  width="200" height="200" />
</div>

CSS

div {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin: -60px 0 0 -60px;
  -webkit-animation: spin 5s linear infinite;
}

.image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin: -60px 0 0 -60px;
  -webkit-animation: fadein 3s ease-in alternate infinite;
}

@-webkit-keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}