Сообщений в теме: 4

[Антон 5554]

Здравствуйте, потратил время и не нашел подходящего кода, а собственных знаний не достаточно!
Помогите сделать анимацию:  поворот кнопки купить на 1 градус интервалом времени каждые 4 секунды,

что бы повернулась на градус и сразу в исходное положение вернулась > через 0,5 секунды повтор действия и сразу в исходное положение вернулась > потом пауза 4 секунды и снова тоже самое >

(что бы получился как бы двойной щелчёк, но без наведения мышкой - автоматически ,что бы создать эффект призыва к действию)

- нужно сохранить цвет размер и эффект при наведении
- нужно чтобы эффект анимации был только на кнопке купить в корзине, и не отражался больше нигде на сайте.


Спасибо!

[Vaccina]

Здравствуйте.

Уточните пожалуйста, при наведении на кнопку анимация должна отсутствовать? Анимация должна быть у товаров в категории или в карточке товара?

[Антон 5554]

Vaccina (27 Февраль 2019 - 03:37) писал:

Здравствуйте.

Уточните пожалуйста, при наведении на кнопку анимация должна отсутствовать? Анимация должна быть у товаров в категории или в карточке товара?

Здравствуйте, да, при наведении обычная кнопка.
анимация только в карточке товара.

[Vaccina]

Здравствуйте.

Благодарю за ожидание, зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:

.product-shop .add-to-cart input:nth-child(2){background-color: #F67A3E;}

замените на:

.product-shop .add-to-cart input:nth-child(2){background-color: #F67A3E;animation: buy_it 6s linear infinite;}
@keyframes buy_it {
  0%, 10%, 80% {
	transform: skew(0deg, 0deg);
  }
  5%, 85% {
   transform: skew(-3deg, 3deg);
  }
}

[Антон 5554]

Vaccina (05 Март 2019 - 07:36) писал:

Здравствуйте.

Благодарю за ожидание, зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:

.product-shop .add-to-cart input:nth-child(2){background-color: #F67A3E;}

замените на:

.product-shop .add-to-cart input:nth-child(2){background-color: #F67A3E;animation: buy_it 6s linear infinite;}
@keyframes buy_it {
0%, 10%, 80% {
transform: skew(0deg, 0deg);
}
5%, 85% {
transform: skew(-3deg, 3deg);
}
}

С П А С И Б О !!!