Efekt na logu

Witam 
Chciałbym zrobić gdy podczas najechania kursorem na logo logo przybliżało się i lekko potrzasało się 
wiem że efekt taki da się osiągnąć\

Domena CS-420.PL

Jeśli chodzi o sam sposób wykonania - jest to odpowiednia animacja wywoływana przez :hover, są już gotowe biblioteki z takimi animacjami np. ta https://elrumordelaluz.github.io/csshake/
Na stronie znajdziesz instrukcję jak użyć tej biblioteki.

http://jsfiddle.net/5q7gx3sb/1/

http://jsfiddle.net/5q7gx3sb/1/

Co to?

---

gdzie to wkleic

CSS wklejasz do global.css (w trybie zaawansowanym), tylko musisz zmienić nazwę klasy page-logo na tą, którą ma logo na Twojej stronie, bo inaczej działać to nie będzie

niby jest ale coś się psuje i za barddzo do dołu schodzi
demo na CS-420.PL

Dzieje się tak ponieważ w klasie logo masz już ustawioną właściwość transform która jest nadpisywana przez animację, także najprościej będzie chyba w ten sposób

@keyframes pageLogo {
 from { transform: scale(1) rotate(4deg) translateY(-50%); }
 25% { transform: scale(1.05) rotate(-4deg) translateY(-50%); }
 50% { transform: scale(1.1) rotate(4deg) translateY(-50%); }
 75% { transform: scale(1.15) rotate(-4deg) translateY(-50%); }
 to { transform: scale(1) rotate(0) translateY(-50%); }
}

U mnie dalej to samo

Bo dalej masz w logo.css to:

.logo {}.logo: hover {
    animation: Logo.5 s ease - in -out
}
@keyframes Logo {
    from {
        transform: scale(1) rotate(4 deg)
    }
    25 % {
        transform: scale(1.05) rotate(-4 deg)
    }
    50 % {
        transform: scale(1.1) rotate(4 deg)
    }
    75 % {
        transform: scale(1.15) rotate(-4 deg)
    }
    to {
        transform: scale(1) rotate(0)
    }
}

Zamiast tego:

.logo{}.logo:hover{animation:Logo .5s ease-in-out}
@keyframes Logo {
from { transform: scale(1) rotate(4deg) translateY(-50%); }
25% { transform: scale(1.05) rotate(-4deg) translateY(-50%); }
50% { transform: scale(1.1) rotate(4deg) translateY(-50%); }
75% { transform: scale(1.15) rotate(-4deg) translateY(-50%); }
to { transform: scale(1) rotate(0) translateY(-50%); }
}

zrobiłem to i nadal to samo

Nie, już jest dobrze. Wyczyść sobie cache to zobaczysz (wciskasz Ctrl + F5)