Im trying to use this hover.css code to have an effect on my icons but it is not working not sure why…im getting it from here
.icons hvr-buzz-out{
-webkit-transform: translateX(-1px) rotate(0);
transform: translateX(-1px) rotate(0);
}
This is the img.
<img src="images/LINKEDIN.png" class="icons hvr-buzz-out" alt="IOG Linkedin" style="width:22px;height:22px;">
Your selecting <hvr-buzz-out> in that above code. Make it this.
.icons.hvr-buzz-out{
-webkit-transform: translateX(-1px) rotate(0);
transform: translateX(-1px) rotate(0);
}
Notice no space between the classes (this dictates that the element that this code chooses must have both classes.)
How you have it is that they’d need <div class="icons"><hvr-buzz-out> setup which is obvious that you don’t want it.
hmm I used this but it still didnt work…
Where is the period (.) before “icons” like I have in my code?
whoops i copied it wrong…I mean this still didnt work…
Could I please get a website then? Or a test case demonstrating this not working?
Right. Well it actually is working, however you don’t have it set as a hover (which I presume you want.) Right now the effect is happening when the page loads.
Add :hover onto the end of your rule. It’s only a 1px transform on hover but you’ll still be able to see it.
weird…it moves but it does not do the effect on my end. On here is the effect “Buzz Out” that I want…
Here is the code they provide for it I may be missing something…
/* Buzz Out */
@-webkit-keyframes hvr-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);
}
}
@keyframes hvr-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);
}
}
.hvr-buzz-out {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
}
.hvr-buzz-out:hover, .hvr-buzz-out:focus, .hvr-buzz-out:active {
-webkit-animation-name: hvr-buzz-out;
animation-name: hvr-buzz-out;
-webkit-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
In their source search for “hvr-buzz-out”
That keyframe code is sort of like an event trigger. That’ll run on an animation. You’ll see that there will be something like “animation: hvr-buzz-out” or whatever.
You didn’t copy it correctly.
Are you talking about this one?
Look at this (from the original website.)
.hvr-buzz-out:hover, .hvr-buzz-out:focus, .hvr-buzz-out:active {
-webkit-animation-name: hvr-buzz-out;
animation-name: hvr-buzz-out;
-webkit-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
That’s calling hvr-buzz-out.
Then you need the keyframes code there so it correctly calls it. The code I’m referring to right now is what you posted in post #9.
So should it look like this? it kinda works…but not so smoothly…
.icons.hvr-buzz-out:hover {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg;
-webkit-animation-name: hvr-buzz-out;
-webkit-animation-duration: 0.75s;
}
Test that in IE or FIrefox. You’ll see it doesn’t work. You need the regular animation-name and animation-duration for non webkit browsers.
so like this? it moves but doesnt do that effect…
.icons.hvr-buzz-out:hover {
transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg;
animation-name: hvr-buzz-out;
animation-duration: 0.75s;
}
Validate your CSS. That is 100% ALWAYS your first stop when you debug your code. I won’t be here forever to hold your hand. You need to start learning how to figure this stuff out!
Let me know what your validations find and what you plan to do to fix it. You should find something invalid on that rule you just posted.
ok.
OK. so I validated it and I got a parse error seems like it was a syntax error here:
So I fixed it to this:
transform: translateX(-3px) rotate(-2deg);
that solves my css validation 
but still not getting the right effect on it it tilts rather than shake… 
Like I said before, you need to add in your code from post #9 into your stylesheet. How can " animation-name: hvr-buzz-out;" take effect if there is no keyframe created called “hvr-buzz-out”?
it should be this right? but then I get the validation error of: Sorry, the at-rule @-webkit-keyframes is not implemented.
@-webkit-keyframes hvr-buzz-out {
60% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
}
.icons.hvr-buzz-out:hover {
-webkit-animation-name: hvr-buzz-out;
animation-name: hvr-buzz-out;
-webkit-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}