CSS rotate animation with pulse

Question

I am trying to make an animation using CSS. It should rotate an image and give it a pulse (something similar to Shazam's button animation). The following is my code. Image is rotating but if I add 'scale' to try and make it pulsate as well, it has a pulse but does not rotate.

    .animated {
    animation-duration: 5s; 
        -webkit-animation-duration: 5s; 
    animation-fill-mode: none;
        -webkit-animation-fill-mode: none;
    animation-timing-function: linear;
        -webkit-animation-timing-function: linear; 
    animation-iteration-count: infinite; 
        -webkit-animation-iteration-count: infinite; 
} 

@keyframes rotate { 
    0% { 
        /*transform: scale(1);*/
        transform-origin: center center; 
        transform: rotate(-360deg);
    }
    50% {
        /*transform: scale(1.1);*/
        transform-origin: center center;
    }
    100% { 
        /*transform: scale(1);*/
        transform-origin: center center; 
        transform: rotate(0);
    } 
} 

@-webkit-keyframes rotate { 
    0% {
        /*-webkit-transform: scale(1);*/ 
        -webkit-transform-origin: center center; 
        -webkit-transform: rotate(-360deg);   
    }
    50% {
        /*-webkit-transform: scale(1.1);*/
        -webkit-transform-origin: center center;
    }  
    100% { 
        /*-webkit-transform: scale(1);*/
        -webkit-transform-origin: center center; 
        -webkit-transform: rotate(0);
    } 
}

.rotate { 
    animation-name: rotate; 
        -webkit-animation-name: rotate;  
}

Could someone please help?

Answer 1

This is a guess since I don't know how you html (markup).

You have to add all the transform properties on each step in the keyframe.
So if any of the keyframes have sett: transform: scale(2); Then it will only scale.

So you have to set all the transfrom properties on all keyframes.
eg. transfrom: scale(value) rotate(value); on every keyframe.

.animated {
  animation-duration: 5s;
  -webkit-animation-duration: 5s;
  animation-fill-mode: none;
  -webkit-animation-fill-mode: none;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}
@keyframes rotate {
  0% {
    /*transform: scale(1);*/
    transform-origin: center center;
    transform: rotate(-360deg) scale(1);
  }
  50% {
    /*transform: scale(1.1);*/
    transform-origin: center center;
    transform: rotate(-180deg) scale(0.1);
  }
  100% {
    /*transform: scale(1);*/
    transform-origin: center center;
    transform: rotate(0) scale(1);
  }
}
@-webkit-keyframes rotate {
  0% {
    /*-webkit-transform: scale(1);*/
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(-360deg) scale(1);
  }
  50% {
    /*-webkit-transform: scale(1.1);*/
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(-180deg) scale(0.1);
  }
  100% {
    /*-webkit-transform: scale(1);*/
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(0) scale(1);
  }
}
.rotate {
  animation-name: rotate;
  -webkit-animation-name: rotate;
}

<div>
  <img class="animated rotate" src="http://lorempixel.com/400/200" />
</div>