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); }
}
Related
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);
}
}
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;
}
I'm trying to get this animation to hold it's final state/last frame using css.
animation-fill-mode: forwards; is not working. Is there anyway I can get it to stop returning to beginning position?
jsFiddle with broken animation
.rotate{
animation: animationFrames ease 4s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
animation-fill-mode:forwards; /*when the spec is finished*/
-webkit-animation: animationFrames ease 4s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode:forwards/*Chrome 16+, Safari 4+*/
}
#keyframes animationFrames{
0% {
transform: translate(0px,0px) rotate(0deg) ;
}
100% {
transform: translate(0px,-10px) rotate(-45deg) ;
}
}
#-moz-keyframes animationFrames{
0% {
-moz-transform: translate(0px,0px) rotate(0deg) ;
}
100% {
-moz-transform: translate(0px,-10px) rotate(-45deg) ;
}
}
#-webkit-keyframes animationFrames {
0% {
-webkit-transform: translate(0px,0px) rotate(0deg) ;
}
100% {
-webkit-transform: translate(0px,-10px) rotate(-45deg) ;
}
}
#-o-keyframes animationFrames {
0% {
-o-transform: translate(0px,0px) rotate(0deg) ;
}
100% {
-o-transform: translate(0px,-10px) rotate(-45deg) ;
}
}
#-ms-keyframes animationFrames {
0% {
-ms-transform: translate(0px,0px) rotate(0deg) ;
}
100% {
-ms-transform: translate(0px,-10px) rotate(-45deg) ;
}
}
<body>
<div> <span class="rotate">G</span>
</div>
</body>
It looks like you may have had some syntax issues, the syntax for the animation shorthand property is:
name | duration | timing-function | delay | iteration-count |
direction | fill-mode | play-state
.rotate {
animation: animationFrames 4s ease 0s 1 normal forwards running;
transform-origin: 50% 50%;
position: absolute;
}
#keyframes animationFrames {
0% {
transform: translate(0px, 0px) rotate(0deg);
}
100% {
transform: translate(0px, -10px) rotate(-45deg);
}
}
<body>
<div> <span class="rotate">G</span>
</div>
</body>
Note that this will work in modern versions of Firefox and Chrome without the browser prefixes.
Method 1:
Use animation-direction: alternate; to reverse the animation.
Fiddle: http://jsfiddle.net/jgvkjzqb/5/
.rotate{
animation: animationFrames ease 4s;
animation-iteration-count: 2;
transform-origin: 50% 50%;
animation-fill-mode:forwards; /*when the spec is finished*/
-webkit-animation: animationFrames ease 4s;
-webkit-animation-iteration-count: 2;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode:forwards/*Chrome 16+, Safari 4+*/
-webkit-animation-direction: alternate;
animation-direction: alternate;
}
#keyframes animationFrames{
0% {
transform: translate(0px,0px) rotate(0deg) ;
}
100% {
transform: translate(0px,-10px) rotate(-45deg) ;
}
}
#-moz-keyframes animationFrames{
0% {
-moz-transform: translate(0px,0px) rotate(0deg) ;
}
100% {
-moz-transform: translate(0px,-10px) rotate(-45deg) ;
}
}
#-webkit-keyframes animationFrames {
0% {
-webkit-transform: translate(0px,0px) rotate(0deg) ;
}
100% {
-webkit-transform: translate(0px,-10px) rotate(-45deg) ;
}
}
#-o-keyframes animationFrames {
0% {
-o-transform: translate(0px,0px) rotate(0deg) ;
}
100% {
-o-transform: translate(0px,-10px) rotate(-45deg) ;
}
}
#-ms-keyframes animationFrames {
0% {
-ms-transform: translate(0px,0px) rotate(0deg) ;
}
100% {
-ms-transform: translate(0px,-10px) rotate(-45deg) ;
}
}
<body>
<div> <span class="rotate">G</span>
</div>
</body>
Method 2:
Try doing the rotate(-45deg) transition at 50% and rotate(0deg) at 100%.
Fiddle: http://jsfiddle.net/jgvkjzqb/2/
.rotate {
animation: animationFrames ease 8s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
animation-fill-mode:forwards;
/*when the spec is finished*/
-webkit-animation: animationFrames ease 8s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode:forwards
/*Chrome 16+, Safari 4+*/
}
#keyframes animationFrames {
0% {
transform: translate(0px, 0px) rotate(0deg);
}
50% {
transform: translate(0px, -10px) rotate(-45deg);
}
100% {
transform: translate(0px, 0px) rotate(0deg);
}
}
#-moz-keyframes animationFrames {
0% {
-moz-transform: translate(0px, 0px) rotate(0deg);
}
50% {
-moz-transform: translate(0px, -10px) rotate(-45deg);
}
100% {
-moz-transform: translate(0px, 0px) rotate(0deg);
}
}
#-webkit-keyframes animationFrames {
0% {
-webkit-transform: translate(0px, 0px) rotate(0deg);
}
50% {
-webkit-transform: translate(0px, -10px) rotate(-45deg);
}
100% {
-webkit-transform: translate(0px, 0px) rotate(0deg);
}
}
#-o-keyframes animationFrames {
0% {
-o-transform: translate(0px, 0px) rotate(0deg);
}
50% {
-o-transform: translate(0px, -10px) rotate(-45deg);
}
100% {
-o-transform: translate(0px, 0px) rotate(0deg);
}
}
#-ms-keyframes animationFrames {
0% {
-ms-transform: translate(0px, 0px) rotate(0deg);
}
50% {
-ms-transform: translate(0px, -10px) rotate(-45deg);
}
100% {
-ms-transform: translate(0px, 0px) rotate(0deg);
}
}
<body>
<div> <span class="rotate">G</span>
</div>
</body>
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.
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;
}