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

Question

[sanke46]

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

Как сделать loop анимацию как в блоке "Есть вопросы ?"(почти предпоследний блок на сайте);

Answer 1

[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);}}

Answer 2

[Михаил Чирский]

Эта самая обычная анимация с использованием CSS, если есть хоть минимальные знания, не составит проблем.