CSS用脉冲

Question

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

    .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);。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;