CSS用脉冲旋转动画

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>