CSS 用脉冲旋转动画

Question

我正在尝试使用 CSS 制作动画。它应该旋转图像并给它一个脉冲（类似于 Shazam 的按钮动画）。以下是我的代码。图像在旋转，但如果我添加 'scale' 以尝试使其也有脉动，它有脉搏但不旋转。

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

CSS 用脉冲旋转动画

CSS rotate animation with pulse

html

css

animation

rotation

frontend