带有脉冲的CSS旋转动画

Question

我想用CSS制作动画。它应该旋转图像并给它一个脉冲（类似于Shazam的按钮动画）。 以下是我的代码。图像是旋转的，但如果我添加“比例”来尝试并使其脉动，它有一个脉冲但不旋转。

.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; 
} 

有人能帮忙吗？

Answer 1

这是一个猜测，因为我不知道你是如何HTML（标记）。

您必须在关键帧的每个步骤中添加所有转换属性。
因此，如果任何关键帧已经设置：transform: scale(2);然后它只会缩放。

所以你必须在所有关键帧上设置所有的transfrom属性。
例如。每个关键帧上的transfrom: scale(value) rotate(value);。

.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>