Play multiple CSS animations at the same time.

<style type="text/css">

.image {
border-radius: 25%;
   -webkit-animation: spin 2s linear infinite;
}

.container {
   position: absolute;
   top: 40%;
   left: 50%;
   margin:-60px 0 0 -60px;
   -webkit-animation: scale 4s linear infinite;
}

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

@-webkit-keyframes scale {
   100% {
        transform: scale(2);
   }
}

</style>


<div class="container">
<img class="image" src="p17.png" alt="" width="170" height="170"/>
</div>


Output :)

1)

2)

3)