Здравствуйте, потратил время и не нашел подходящего кода, а собственных знаний не достаточно!
Помогите сделать анимацию: поворот кнопки купить на 1 градус интервалом времени каждые 4 секунды,
что бы повернулась на градус и сразу в исходное положение вернулась > через 0,5 секунды повтор действия и сразу в исходное положение вернулась > потом пауза 4 секунды и снова тоже самое >
(что бы получился как бы двойной щелчёк, но без наведения мышкой - автоматически ,что бы создать эффект призыва к действию)
- нужно сохранить цвет размер и эффект при наведении
- нужно чтобы эффект анимации был только на кнопке купить в корзине, и не отражался больше нигде на сайте.
Спасибо!
1
Анимация Поворот Кнопки Купить С Интервалом Времени
Автор Антон 5554, 22 февр. 2019 15:18
анимация кнопки купить
Сообщений в теме: 4
#1
Отправлено 22 Февраль 2019 - 15:18
#2
Отправлено 27 Февраль 2019 - 03:37
Здравствуйте.
Уточните пожалуйста, при наведении на кнопку анимация должна отсутствовать? Анимация должна быть у товаров в категории или в карточке товара?
Уточните пожалуйста, при наведении на кнопку анимация должна отсутствовать? Анимация должна быть у товаров в категории или в карточке товара?
#3
Отправлено 27 Февраль 2019 - 09:14
Vaccina (27 Февраль 2019 - 03:37) писал:
Здравствуйте.
Уточните пожалуйста, при наведении на кнопку анимация должна отсутствовать? Анимация должна быть у товаров в категории или в карточке товара?
Уточните пожалуйста, при наведении на кнопку анимация должна отсутствовать? Анимация должна быть у товаров в категории или в карточке товара?
анимация только в карточке товара.
#4
Отправлено 05 Март 2019 - 07:36
Здравствуйте.
Благодарю за ожидание, зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
замените на:
Благодарю за ожидание, зайдите в раздел Сайт - Редактор шаблонов - 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); } }
#5
Отправлено 05 Март 2019 - 10:14
Vaccina (05 Март 2019 - 07:36) писал:
Здравствуйте.
Благодарю за ожидание, зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
замените на:
Благодарю за ожидание, зайдите в раздел Сайт - Редактор шаблонов - 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); } }
С П А С И Б О !!!
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных