keyframes dosent work in firefox - css

i used keyframes in order that to make a plus effect on a text which every 15s make a plus effect this work in chrome but doesnt work in Firefox.
i didnt know how can i make a 15s delay between each pulse effect so i try to use more percent in work i dont khow is it tru or not
#-webkit-keyframes pulse_animation {
0% { -webkit-transform: scale(1); }
3% { -webkit-transform: scale(1); }
4% { -webkit-transform: scale(1); }
6% { -webkit-transform: scale(1.08); }
8% { -webkit-transform: scale(1); }
10% { -webkit-transform: scale(1); }
12% { -webkit-transform: scale(1); }
14% { -webkit-transform: scale(1); }
16% { -webkit-transform: scale(1); }
18% { -webkit-transform: scale(1); }
20% { -webkit-transform: scale(1); }
22% { -webkit-transform: scale(1); }
24% { -webkit-transform: scale(1); }
26% { -webkit-transform: scale(1); }
28% { -webkit-transform: scale(1); }
30% { -webkit-transform: scale(1); }
32% { -webkit-transform: scale(1); }
34% { -webkit-transform: scale(1); }
36% { -webkit-transform: scale(1); }
38% { -webkit-transform: scale(1); }
40% { -webkit-transform: scale(1); }
42% { -webkit-transform: scale(1); }
44% { -webkit-transform: scale(1); }
46% { -webkit-transform: scale(1); }
48% { -webkit-transform: scale(1); }
50% { -webkit-transform: scale(1); }
52% { -webkit-transform: scale(1); }
54% { -webkit-transform: scale(1); }
56% { -webkit-transform: scale(1); }
58% { -webkit-transform: scale(1); }
60% { -webkit-transform: scale(1); }
62% { -webkit-transform: scale(1); }
64% { -webkit-transform: scale(1); }
66% { -webkit-transform: scale(1); }
68% { -webkit-transform: scale(1); }
70% { -webkit-transform: scale(1); }
72% { -webkit-transform: scale(1); }
74% { -webkit-transform: scale(1); }
76% { -webkit-transform: scale(1); }
78% { -webkit-transform: scale(1); }
80% { -webkit-transform: scale(1); }
82% { -webkit-transform: scale(1); }
84% { -webkit-transform: scale(1); }
86% { -webkit-transform: scale(1); }
88% { -webkit-transform: scale(1); }
90% { -webkit-transform: scale(1); }
92% { -webkit-transform: scale(1); }
94% { -webkit-transform: scale(1); }
96% { -webkit-transform: scale(1); }
98% { -webkit-transform: scale(1); }
100% { -webkit-transform: scale(1); }
}
#-moz-keyframes pulse_animation {
0% { -moz-transform: scale(1); }
3% { -moz-transform: scale(1); }
4% { -moz-transform: scale(1); }
6% { -moz-transform: scale(1.08); }
8% { -moz-transform: scale(1); }
10% { -moz-transform: scale(1); }
12% { -moz-transform: scale(1); }
14% { -moz-transform: scale(1); }
16% { -moz-transform: scale(1); }
18% { -moz-transform: scale(1); }
20% { -moz-transform: scale(1); }
22% { -moz-transform: scale(1); }
24% { -moz-transform: scale(1); }
26% { -moz-transform: scale(1); }
28% { -moz-transform: scale(1); }
30% { -moz-transform: scale(1); }
32% { -moz-transform: scale(1); }
34% { -moz-transform: scale(1); }
36% { -moz-transform: scale(1); }
38% { -moz-transform: scale(1); }
40% { -moz-transform: scale(1); }
42% { -moz-transform: scale(1); }
44% { -moz-transform: scale(1); }
46% { -moz-transform: scale(1); }
48% { -moz-transform: scale(1); }
50% { -moz-transform: scale(1); }
52% { -moz-transform: scale(1); }
54% { -moz-transform: scale(1); }
56% { -moz-transform: scale(1); }
58% { -moz-transform: scale(1); }
60% { -moz-transform: scale(1); }
62% { -moz-transform: scale(1); }
64% { -moz-transform: scale(1); }
66% { -moz-transform: scale(1); }
68% { -moz-transform: scale(1); }
70% { -moz-transform: scale(1); }
72% { -moz-transform: scale(1); }
74% { -moz-transform: scale(1); }
76% { -moz-transform: scale(1); }
78% { -moz-transform: scale(1); }
80% { -moz-transform: scale(1); }
82% { -moz-transform: scale(1); }
84% { -moz-transform: scale(1); }
86% { -moz-transform: scale(1); }
88% { -moz-transform: scale(1); }
90% { -moz-transform: scale(1); }
92% { -moz-transform: scale(1); }
94% { -moz-transform: scale(1); }
96% { -moz-transform: scale(1); }
98% { -moz-transform: scale(1); }
100% { -moz-transform: scale(1); }
}
#keyframes pulse_animation {
0% { transform: scale(1); }
3% { transform: scale(1); }
4% { transform: scale(1); }
6% { transform: scale(1.08); }
8% { transform: scale(1); }
10% { transform: scale(1); }
12% { transform: scale(1); }
14% { transform: scale(1); }
16% { transform: scale(1); }
18% { transform: scale(1); }
20% { transform: scale(1); }
22% { transform: scale(1); }
24% { transform: scale(1); }
26% { transform: scale(1); }
28% { transform: scale(1); }
30% { transform: scale(1); }
32% { transform: scale(1); }
34% { transform: scale(1); }
36% { transform: scale(1); }
38% { transform: scale(1); }
40% { transform: scale(1); }
42% { transform: scale(1); }
44% { transform: scale(1); }
46% { transform: scale(1); }
48% { transform: scale(1); }
50% { transform: scale(1); }
52% { transform: scale(1); }
54% { transform: scale(1); }
56% { transform: scale(1); }
58% { transform: scale(1); }
60% { transform: scale(1); }
62% { transform: scale(1); }
64% { transform: scale(1); }
66% { transform: scale(1); }
68% { transform: scale(1); }
70% { transform: scale(1); }
72% { transform: scale(1); }
74% { transform: scale(1); }
76% { transform: scale(1); }
78% { transform: scale(1); }
80% { transform: scale(1); }
82% { transform: scale(1); }
84% { transform: scale(1); }
86% { transform: scale(1); }
88% { transform: scale(1); }
90% { transform: scale(1); }
92% { transform: scale(1); }
94% { transform: scale(1); }
96% { transform: scale(1); }
98% { transform: scale(1); }
100% { transform: scale(1); }
}
.first-visit{
-webkit-animation-name: 'pulse_animation';
-webkit-animation-duration: 18000ms;
-webkit-transform-origin:40% 40%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-moz-animation-name: 'pulse_animation';
-moz-animation-duration: 18000ms;
-moz-transform-origin:40% 40%;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
animation-name: 'pulse_animation';
animation-duration: 18000ms;
transform-origin:40% 40%;
animation-iteration-count: infinite;
animation-timing-function: linear;
}


use
-moz-animation-name: pulse_animation;
instead of
-moz-animation-name: 'pulse_animation';
the animation name is an identifier, not a string, and hence shouldn't be in quotes.

Related

How to reduce animate.css heartbeat enlarge size

So I am using animate.css to animate a keyboard that shows what key to input. Currently I'm using animate__heartbeat to animate the keys to be pressed but the problem is the animation makes it overflow other keys and I would like to reduce that size.
These are the classes I am using on each keys:
class="animate__animated animate__slow animate__infinite animate__heartBeat"
Since I am new to animate.css I dont know how to change the size it increases during the animation and is there a way to reduce it in css?

if you are using the animate.min.css go to this link https://unminify.com/ and unminify the css and find the below code:
#-webkit-keyframes heartBeat {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
14% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
28% {
-webkit-transform: scale(1);
transform: scale(1);
}
42% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
70% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes heartBeat {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
14% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
28% {
-webkit-transform: scale(1);
transform: scale(1);
}
42% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
70% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
and Replace them with:
#-webkit-keyframes heartBeat {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
14% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
28% {
-webkit-transform: scale(1);
transform: scale(1);
}
42% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
70% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes heartBeat {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
14% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
28% {
-webkit-transform: scale(1);
transform: scale(1);
}
42% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
70% {
-webkit-transform: scale(1);
transform: scale(1);
}
}

CSS3 Animation not working in Mozilla

I've read other answers for the same question in stackoverflow, but I couldn't solve it with them.
My code doesn't work in mozilla, can anyone help me?
Besides that, Can anyone tell me the correct way to use #keyframes. I mean, is it correct to use #-webkit-keyframes, #-moz-keyframes and #keyframes, or with only one it should be fine?
Thanks
header .resaltar {
color: #F3D85E;
font-weight: bold;
}
header .resaltar:hover {
-webkit-animation: shake 0.8s linear infinite;
-moz-animation: shake 0.8s linear infinite;
-ms-animation: shake 0.8s linear infinite;
animation: shake 0.8s linear infinite;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
/** Chrome, Safari, Opera **/
#-webkit-keyframes shake {
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}
#-moz-keyframes shake {
0% { -moz-transform: translate(2px, 1px) rotate(0deg); }
10% { -moz-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -moz-transform: translate(-3px, 0px) rotate(1deg); }
30% { -moz-transform: translate(0px, 2px) rotate(0deg); }
40% { -moz-transform: translate(1px, -1px) rotate(1deg); }
50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -moz-transform: translate(-3px, 1px) rotate(0deg); }
70% { -moz-transform: translate(2px, 1px) rotate(-1deg); }
80% { -moz-transform: translate(-1px, -1px) rotate(1deg); }
90% { -moz-transform: translate(2px, 2px) rotate(0deg); }
100% { -moz-transform: translate(1px, -2px) rotate(-1deg); }
}
#keyframes shake {
0% { transform: translate(2px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(0px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(2px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(2px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}

the problem you are having is animation to a span element.
i noticed that if u apply this animation to the parent element (the header) it works fine.
I think your problem is that the display of the span is inline
Once i changed the display to inline-block, it worked fine with me
header .resaltar {
color: #F3D85E;
font-weight: bold;
display: inline-block;
}

CSS breaking website

I have the following code for a 'bouncy' page transition, but every time it's not commented out, the entire CSS breaks. It didn't do this before I changed some of the keyframes, but now I broke it lol :(
Any help?
body {
-webkit-animation-name: scalein;
-webkit-animation-duration: 750ms;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-moz-animation-name: scalein;
-moz-animation-duration: 750ms;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: linear;
animation-name: scalein;
animation-duration: 750ms;
animation-iteration-count: 1;
animation-timing-function: linear;
}
#keyframes scalein {
1% {
transform: scale(0.1);
}
39% {
transform: scale(1.3);
}
50% {
transform: scale(0.5);
}
75% {
transform: scale(1.1);
}
85% {
transform: scale(0.9);
}
100% {
transform: scale(1);
}
}
#-webkit-keyframes scalein {
1% {
-webkit-transform: scale(0.1);
}
39% {
-webkit-transform: scale(1.3);
}
50% {
-webkit-transform: scale(0.5);
}
75% {
-webkit-transform: scale(1.1);
}
85% {
-webkit-transform: scale(0.9);
}
100% {
-webkit-transform: scale(1);
}
}
#-moz-keyframes scalein {
1% {
-moz-transform: scale(0.1);
}
39% {
-moz-transform: scale(1.3);
}
50% {
-moz-transform: scale(0.5);
}
75% {
-moz-transform: scale(1.1);
}
85% {
-moz-transform: scale(0.9);
}
100% {
-moz-transform: scale(1);
}
}
#-o-keyframes scalein {
1% {
-o-transform: scale(0.1);
}
39% {
-o-transform: scale(1.3);
}
50% {
-o-transform: scale(0.5);
}
75% {
-o-transform: scale(1.1);
}
85% {
-o-transform: scale(0.9;
}
100% {
-o-transform: scale(1);
}
}

You have a syntax error, you forgot the closing parenthesis:
#-o-keyframes scalein {
...
-o-transform: scale(0.9;
...
}

CSS3 Sliding Images

I have some simple CSS3 animations here: http://chooseavirb.com/strat/. They work fine on Firefox, but don't animate at all in Chrome, Safari or IE. Can somebody lend a second set of eyes on the css, an excerpt of which is here (vendor-prefixes have been utilised):
#-webkit-keyframes slideup {
0% {transform: translate(0px, 0px);}
20% {transform: translate(0px,0px);}
25% {transform: translate(0px, -150px);}
45% {transform: translate(0px,-150px);}
50% {transform: translate(0px,-300px);}
70% {transform: translate(0px,-300px);}
75% {transform: translate(0px,-150px);}
95% {transform: translate(0px,-150px);}
100% {transform: translate(0px,px);}
}
#-moz-keyframes slideup {
0% {transform: translate(0px, 0px)}
20% {transform: translate(0px,0px)}
25% {transform: translate(0px, -150px)}
45% {transform: translate(0px,-150px)}
50% {transform: translate(0px,-300px)}
70% {transform: translate(0px,-300px)}
75% {transform: translate(0px,-150px)}
95% {transform: translate(0px,-150px)}
100% {transform: translate(0px,px)}
}
#keyframes slideup {
0% {transform: translate(0px, 0px)}
20% {transform: translate(0px,0px) }
25% {transform: translate(0px, -150px)}
45% {transform: translate(0px,-150px) }
50% {transform: translate(0px,-300px) }
70% {transform: translate(0px,-300px)}
75% { transform: translate(0px,-150px)}
95% {transform: translate(0px,-150px)}
100% {transform: translate(0px,px)}
}
.slideup {
-webkit-animation-name: slideup;
-moz-animation-name: slideup;
-o-animation-name: slideup;
animation-name: slideup;
}

Actually you should use translate3d(x,y,0); to enable GPU acceleration. Animations will be smoother on many devices.

Only Firefox understands transform without a prefix. You need prefixes not only in #keyframes, but within those as well, when you define transitions. Something like this
#-moz-keyframes slideup {
0% { -moz-transform: translate(0px, 0px); transform: translate(0px, 0px); }
20% { -moz-transform: translate(0px,0px); transform: translate(0px,0px); }
25% { -moz-transform: translate(0px, -150px); transform: translate(0px, -150px); }
45% { -moz-transform: translate(0px,-150px); transform: translate(0px,-150px); }
50% { -moz-transform: translate(0px,-300px); transform: translate(0px,-300px); }
70% { -moz-transform: translate(0px,-300px); transform: translate(0px,-300px); }
75% { -moz-transform: translate(0px,-150px); transform: translate(0px,-150px); }
95% { -moz-transform: translate(0px,-150px); transform: translate(0px,-150px); }
100% { -moz-transform: translate(0px,px); transform: translate(0px,px); }
}
#-webkit-keyframes "slideup" {
0% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); }
20% { -webkit-transform: translate(0px,0px); transform: translate(0px,0px); }
25% { -webkit-transform: translate(0px, -150px); transform: translate(0px, -150px); }
45% { -webkit-transform: translate(0px,-150px); transform: translate(0px,-150px); }
50% { -webkit-transform: translate(0px,-300px); transform: translate(0px,-300px); }
70% { -webkit-transform: translate(0px,-300px); transform: translate(0px,-300px); }
75% { -webkit-transform: translate(0px,-150px); transform: translate(0px,-150px); }
95% { -webkit-transform: translate(0px,-150px); transform: translate(0px,-150px); }
100% { -webkit-transform: translate(0px,px); transform: translate(0px,px); }
}
#-ms-keyframes "slideup" {
0% { -ms-transform: translate(0px, 0px); transform: translate(0px, 0px); }
20% { -ms-transform: translate(0px,0px); transform: translate(0px,0px); }
25% { -ms-transform: translate(0px, -150px); transform: translate(0px, -150px); }
45% { -ms-transform: translate(0px,-150px); transform: translate(0px,-150px); }
50% { -ms-transform: translate(0px,-300px); transform: translate(0px,-300px); }
70% { -ms-transform: translate(0px,-300px); transform: translate(0px,-300px); }
75% { -ms-transform: translate(0px,-150px); transform: translate(0px,-150px); }
95% { -ms-transform: translate(0px,-150px); transform: translate(0px,-150px); }
100% { -ms-transform: translate(0px,px); transform: translate(0px,px); }
}
#-o-keyframes "slideup" {
0% { -o-transform: translate(0px, 0px); transform: translate(0px, 0px); }
20% { -o-transform: translate(0px,0px); transform: translate(0px,0px); }
25% { -o-transform: translate(0px, -150px); transform: translate(0px, -150px); }
45% { -o-transform: translate(0px,-150px); transform: translate(0px,-150px); }
50% { -o-transform: translate(0px,-300px); transform: translate(0px,-300px); }
70% { -o-transform: translate(0px,-300px); transform: translate(0px,-300px); }
75% { -o-transform: translate(0px,-150px); transform: translate(0px,-150px); }
95% { -o-transform: translate(0px,-150px); transform: translate(0px,-150px); }
100% { -o-transform: translate(0px,px); transform: translate(0px,px); }
}
#keyframes "slideup" {
0% { transform: translate(0px, 0px); }
20% { transform: translate(0px,0px); }
25% { transform: translate(0px, -150px); }
45% { transform: translate(0px,-150px); }
50% { transform: translate(0px,-300px); }
70% { transform: translate(0px,-300px); }
75% { transform: translate(0px,-150px); }
95% { transform: translate(0px,-150px); }
100% { transform: translate(0px,px); }
}

CSS3 animation on launch and on hover?

I have a little problem. I want that the following animation gets fired when the user visits the page AND when he hovers over the element (it's an image). Right now it just fires when visiting the page, but .animated:hover gets ignored? Any advice?
.animated, .animated:hover {
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation: swing 4s;
-moz-animation: swing 4s;
-ms-animation: swing 4s;
-o-animation: swing 4s;
animation: swing 4s;
}
#-webkit-keyframes swing {
0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%, 100% { -webkit-transform-origin: bottom center; }
0% { -webkit-transform: rotate(0deg); }
10% { -webkit-transform: rotate(15deg); }
20% { -webkit-transform: rotate(-10deg); }
30% { -webkit-transform: rotate(10deg); }
40% { -webkit-transform: rotate(-8deg); }
50% { -webkit-transform: rotate(8deg); }
60% { -webkit-transform: rotate(-5deg); }
70% { -webkit-transform: rotate(5deg); }
80% { -webkit-transform: rotate(-2deg); }
90% { -webkit-transform: rotate(2deg); }
100% { -webkit-transform: rotate(0deg); }
}
#-moz-keyframes swing {
0% { -moz-transform: rotate(0deg); }
10% { -moz-transform: rotate(15deg); }
20% { -moz-transform: rotate(-10deg); }
30% { -moz-transform: rotate(10deg); }
40% { -moz-transform: rotate(-8deg); }
50% { -moz-transform: rotate(8deg); }
60% { -moz-transform: rotate(-5deg); }
70% { -moz-transform: rotate(5deg); }
80% { -moz-transform: rotate(-2deg); }
90% { -moz-transform: rotate(2deg); }
100% { -moz-transform: rotate(0deg); }
}
#-o-keyframes swing {
0% { -o-transform: rotate(0deg); }
10% { -o-transform: rotate(15deg); }
20% { -o-transform: rotate(-10deg); }
30% { -o-transform: rotate(10deg); }
40% { -o-transform: rotate(-8deg); }
50% { -o-transform: rotate(8deg); }
60% { -o-transform: rotate(-5deg); }
70% { -o-transform: rotate(5deg); }
80% { -o-transform: rotate(-2deg); }
90% { -o-transform: rotate(2deg); }
100% { -o-transform: rotate(0deg); }
}
#keyframes swing {
0% { transform: rotate(0deg); }
10% { transform: rotate(15deg); }
20% { transform: rotate(-10deg); }
30% { transform: rotate(10deg); }
40% { transform: rotate(-8deg); }
50% { transform: rotate(8deg); }
60% { transform: rotate(-5deg); }
70% { transform: rotate(5deg); }
80% { transform: rotate(-2deg); }
90% { transform: rotate(2deg); }
100% { transform: rotate(0deg); }
}
.swing {
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
-o-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-animation-name: swing;
-moz-animation-name: swing;
-o-animation-name: swing;
animation-name: swing;
}

Nice animation, the hover is being cancelled out as its looking for change in the original CSS class, you can fix this by declaring the hover its on animation function.
/*PAGE LOAD ANIMATION*/
.animated{
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation: swing 4s;
-moz-animation: swing 4s;
-ms-animation: swing 4s;
-o-animation: swing 4s;
animation: swing 4s;
}
#-webkit-keyframes swing {
0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%, 100% { -webkit-transform-origin: bottom center; }
0% { -webkit-transform: rotate(0deg); }
10% { -webkit-transform: rotate(15deg); }
20% { -webkit-transform: rotate(-10deg); }
30% { -webkit-transform: rotate(10deg); }
40% { -webkit-transform: rotate(-8deg); }
50% { -webkit-transform: rotate(8deg); }
60% { -webkit-transform: rotate(-5deg); }
70% { -webkit-transform: rotate(5deg); }
80% { -webkit-transform: rotate(-2deg); }
90% { -webkit-transform: rotate(2deg); }
100% { -webkit-transform: rotate(0deg); }
}
#-moz-keyframes swing {
0% { -moz-transform: rotate(0deg); }
10% { -moz-transform: rotate(15deg); }
20% { -moz-transform: rotate(-10deg); }
30% { -moz-transform: rotate(10deg); }
40% { -moz-transform: rotate(-8deg); }
50% { -moz-transform: rotate(8deg); }
60% { -moz-transform: rotate(-5deg); }
70% { -moz-transform: rotate(5deg); }
80% { -moz-transform: rotate(-2deg); }
90% { -moz-transform: rotate(2deg); }
100% { -moz-transform: rotate(0deg); }
}
#-o-keyframes swing {
0% { -o-transform: rotate(0deg); }
10% { -o-transform: rotate(15deg); }
20% { -o-transform: rotate(-10deg); }
30% { -o-transform: rotate(10deg); }
40% { -o-transform: rotate(-8deg); }
50% { -o-transform: rotate(8deg); }
60% { -o-transform: rotate(-5deg); }
70% { -o-transform: rotate(5deg); }
80% { -o-transform: rotate(-2deg); }
90% { -o-transform: rotate(2deg); }
100% { -o-transform: rotate(0deg); }
}
#keyframes swing {
0% { transform: rotate(0deg); }
10% { transform: rotate(15deg); }
20% { transform: rotate(-10deg); }
30% { transform: rotate(10deg); }
40% { transform: rotate(-8deg); }
50% { transform: rotate(8deg); }
60% { transform: rotate(-5deg); }
70% { transform: rotate(5deg); }
80% { transform: rotate(-2deg); }
90% { transform: rotate(2deg); }
100% { transform: rotate(0deg); }
}
.swing {
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
-o-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-animation-name: swing;
-moz-animation-name: swing;
-o-animation-name: swing;
animation-name: swing;
}
/*HOVER ANIMIATION*/
.animated:hover{
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation: swingHover 4s;
-moz-animation: swingHover 4s;
-ms-animation: swingHover 4s;
-o-animation: swingHover 4s;
animation: swingHover 4s;
}
#-webkit-keyframes swingHover {
0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%, 100% { -webkit-transform-origin: bottom center; }
0% { -webkit-transform: rotate(0deg); }
10% { -webkit-transform: rotate(15deg); }
20% { -webkit-transform: rotate(-10deg); }
30% { -webkit-transform: rotate(10deg); }
40% { -webkit-transform: rotate(-8deg); }
50% { -webkit-transform: rotate(8deg); }
60% { -webkit-transform: rotate(-5deg); }
70% { -webkit-transform: rotate(5deg); }
80% { -webkit-transform: rotate(-2deg); }
90% { -webkit-transform: rotate(2deg); }
100% { -webkit-transform: rotate(0deg); }
}
#-moz-keyframes swingHover {
0% { -moz-transform: rotate(0deg); }
10% { -moz-transform: rotate(15deg); }
20% { -moz-transform: rotate(-10deg); }
30% { -moz-transform: rotate(10deg); }
40% { -moz-transform: rotate(-8deg); }
50% { -moz-transform: rotate(8deg); }
60% { -moz-transform: rotate(-5deg); }
70% { -moz-transform: rotate(5deg); }
80% { -moz-transform: rotate(-2deg); }
90% { -moz-transform: rotate(2deg); }
100% { -moz-transform: rotate(0deg); }
}
#-o-keyframes swingHover {
0% { -o-transform: rotate(0deg); }
10% { -o-transform: rotate(15deg); }
20% { -o-transform: rotate(-10deg); }
30% { -o-transform: rotate(10deg); }
40% { -o-transform: rotate(-8deg); }
50% { -o-transform: rotate(8deg); }
60% { -o-transform: rotate(-5deg); }
70% { -o-transform: rotate(5deg); }
80% { -o-transform: rotate(-2deg); }
90% { -o-transform: rotate(2deg); }
100% { -o-transform: rotate(0deg); }
}
#keyframes swingHover {
0% { transform: rotate(0deg); }
10% { transform: rotate(15deg); }
20% { transform: rotate(-10deg); }
30% { transform: rotate(10deg); }
40% { transform: rotate(-8deg); }
50% { transform: rotate(8deg); }
60% { transform: rotate(-5deg); }
70% { transform: rotate(5deg); }
80% { transform: rotate(-2deg); }
90% { transform: rotate(2deg); }
100% { transform: rotate(0deg); }
}
.swingHover {
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
-o-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-animation-name: swingHover;
-moz-animation-name: swingHover;
-o-animation-name: swingHover;
animation-name: swingHover;
}

Resources