CSS вращать анимацию с импульсом

Я пытаюсь сделать анимацию с помощью CSS. Он должен вращать изображение и давать ему импульс (что-то похожее на анимацию кнопок Shazam). Ниже приведен мой код. Изображение вращается, но если я добавлю «масштаб», чтобы попытаться сделать его пульсирующим, он имеет импульс, но не вращается.CSS вращать анимацию с импульсом

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

Помогло ли кто-нибудь помочь?

источник

2015-06-17 Lu Kanemon

Не могли бы вы добавить свой HTML код, как это важно для предоставления вам решение? – Persijn

Ваш код не показывает нам, как вы устанавливаете ключевые слова 'rotate' на элементах' .animated' и как вы пытались добавить 'pulse'. – BillyNate

Это предположение, так как я не знаю, как вы 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>

источник

2015-06-17 07:54:30 Persijn

Большое вам спасибо, это сработало отлично! : D –

CSS вращать анимацию с импульсом

ответ

Смежные вопросы