Задать вопрос
@sanke46
javascript

Как сделать анимацию в сайте?

hello-brand.ru как сделать анимацию при наведении мышкой к обьекту [как в лого] ?? (используя animate.css или что то другое)

Как сделать loop анимацию как в блоке "Есть вопросы ?"(почти предпоследний блок на сайте);
  • Вопрос задан
  • 454 просмотра
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 1
Anna_BS
@Anna_BS
Все это можно посмотреть на самом сайте
анимация лого:
.logo:hover:before {
    -webkit-animation: buzz-out 1 linear 1.3s;
    -moz-animation: buzz-out 1 linear 1.3s;
    -o-animation: buzz-out 1 linear 1.3s;
    animation: buzz-out 1 linear 1.3s;
}
@-webkit-keyframes buzz-out{10%{-webkit-transform:translateX(3px) rotate(2deg);transform:translateX(3px) rotate(2deg)}20%{-webkit-transform:translateX(-3px) rotate(-2deg);transform:translateX(-3px) rotate(-2deg)}30%{-webkit-transform:translateX(3px) rotate(2deg);transform:translateX(3px) rotate(2deg)}40%{-webkit-transform:translateX(-3px) rotate(-2deg);transform:translateX(-3px) rotate(-2deg)}50%{-webkit-transform:translateX(2px) rotate(1deg);transform:translateX(2px) rotate(1deg)}60%{-webkit-transform:translateX(-2px) rotate(-1deg);transform:translateX(-2px) rotate(-1deg)}70%{-webkit-transform:translateX(2px) rotate(1deg);transform:translateX(2px) rotate(1deg)}80%{-webkit-transform:translateX(-2px) rotate(-1deg);transform:translateX(-2px) rotate(-1deg)}90%{-webkit-transform:translateX(1px) rotate(0);transform:translateX(1px) rotate(0)}100%{-webkit-transform:translateX(-1px) rotate(0);transform:translateX(-1px) rotate(0)}}
	@-moz-keyframes buzz-out{10%{-moz-transform:translateX(3px) rotate(2deg);transform:translateX(3px) rotate(2deg)}20%{-moz-transform:translateX(-3px) rotate(-2deg);transform:translateX(-3px) rotate(-2deg)}30%{-moz-transform:translateX(3px) rotate(2deg);transform:translateX(3px) rotate(2deg)}40%{-moz-transform:translateX(-3px) rotate(-2deg);transform:translateX(-3px) rotate(-2deg)}50%{-moz-transform:translateX(2px) rotate(1deg);transform:translateX(2px) rotate(1deg)}60%{-moz-transform:translateX(-2px) rotate(-1deg);transform:translateX(-2px) rotate(-1deg)}70%{-moz-transform:translateX(2px) rotate(1deg);transform:translateX(2px) rotate(1deg)}80%{-moz-transform:translateX(-2px) rotate(-1deg);transform:translateX(-2px) rotate(-1deg)}90%{-moz-transform:translateX(1px) rotate(0);transform:translateX(1px) rotate(0)}100%{-moz-transform:translateX(-1px) rotate(0);transform:translateX(-1px) rotate(0)}}
	@-o-keyframes buzz-out{10%{-o-transform:translateX(3px) rotate(2deg);transform:translateX(3px) rotate(2deg)}20%{-o-transform:translateX(-3px) rotate(-2deg);transform:translateX(-3px) rotate(-2deg)}30%{-o-transform:translateX(3px) rotate(2deg);transform:translateX(3px) rotate(2deg)}40%{-o-transform:translateX(-3px) rotate(-2deg);transform:translateX(-3px) rotate(-2deg)}50%{-o-transform:translateX(2px) rotate(1deg);transform:translateX(2px) rotate(1deg)}60%{-o-transform:translateX(-2px) rotate(-1deg);transform:translateX(-2px) rotate(-1deg)}70%{-o-transform:translateX(2px) rotate(1deg);transform:translateX(2px) rotate(1deg)}80%{-o-transform:translateX(-2px) rotate(-1deg);transform:translateX(-2px) rotate(-1deg)}90%{-o-transform:translateX(1px) rotate(0);transform:translateX(1px) rotate(0)}100%{-o-transform:translateX(-1px) rotate(0);transform:translateX(-1px) rotate(0)}}
	@keyframes buzz-out{10%{-webkit-transform:translateX(3px) rotate(2deg);transform:translateX(3px) rotate(2deg)}20%{-webkit-transform:translateX(-3px) rotate(-2deg);transform:translateX(-3px) rotate(-2deg)}30%{-webkit-transform:translateX(3px) rotate(2deg);transform:translateX(3px) rotate(2deg)}40%{-webkit-transform:translateX(-3px) rotate(-2deg);transform:translateX(-3px) rotate(-2deg)}50%{-webkit-transform:translateX(2px) rotate(1deg);transform:translateX(2px) rotate(1deg)}60%{-webkit-transform:translateX(-2px) rotate(-1deg);transform:translateX(-2px) rotate(-1deg)}70%{-webkit-transform:translateX(2px) rotate(1deg);transform:translateX(2px) rotate(1deg)}80%{-webkit-transform:translateX(-2px) rotate(-1deg);transform:translateX(-2px) rotate(-1deg)}90%{-webkit-transform:translateX(1px) rotate(0);transform:translateX(1px) rotate(0)}100%{-webkit-transform:translateX(-1px) rotate(0);transform:translateX(-1px) rotate(0)}}


анимация вопросов:
.floating2 {
    -webkit-animation: floating2 infinite ease-in-out 4s;
    -moz-animation: floating2 infinite ease-in-out 4s;
    -o-animation: floating2 infinite ease-in-out 4s;
    animation: floating2 infinite ease-in-out 4s;
)
@-webkit-keyframes floating2{from {-webkit-transform:translate(0, 0px);}55% {-webkit-transform:translate(0px, -10px);}to {-webkit-transform: translate(0, -0px);}}
	@-moz-keyframes floating2{from {-moz-transform:translate(0, 0px);}65% {-moz-transform:translate(0px, -10px);}to {-moz-transform: translate(0, -0px);}}
	@-o-keyframes floating2{from {-o-transform:translate(0, 0px);}65% {-o-transform:translate(0px, -10px);}to {-o-transform: translate(0, -0px);}}
	@keyframes floating2{from {transform:translate(0, 0px);}65% {transform:translate(0px, -10px);}to {transform: translate(0, -0px);}}
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@chirskiy_mixail
Очень давно занимаюсь версткой, имею огромный опыт
Эта самая обычная анимация с использованием CSS, если есть хоть минимальные знания, не составит проблем.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработать бэкэнд на Node.js
25 нояб. 2024, в 18:39
30000 руб./за проект
Разработать бэкэнд на Django
25 нояб. 2024, в 18:35
30000 руб./за проект
Перенести сайт на CMS Wordpress c Tilda
25 нояб. 2024, в 18:33
10000 руб./за проект
Ещё заказы