I'm been trying to make an animation work cross platform and I recently gave up on ie, but i can't understand why none of the instances where i use translate work in firefox, can anyone show me if I'm doing something wrong please? Forever gratefull.
Here's my code up to know:
span.glow-left{position: absolute; bottom: 50px; left: -10px; display: block; width:40px; height: 80px; background: url(../img/glow-left.png) no-repeat;
-webkit-animation:glowleft 2s linear infinite;
-moz-animation:glowleft 2s linear infinite;
animation:glowleft 2s linear infinite;
-webkit-animation-delay: 1s; /* Chrome, Safari, Opera */
animation-delay: 1s;
-webkit-animation-name: glowleft;
animation-name: glowleft;}
#keyframes glowleft {
1%{ -moz-transform: translatey(-20px);opacity:0.5;}
2%{ -moz-transform: translatey(-20px);opacity:1;}
13% { -moz-transform: translatey(-150px); opacity: 1 }
40% { -moz-transform: translatey(-340px); opacity:0.5;}
50% { -moz-transform: translatey(-340px); opacity:0;}
100% { -moz-transform: translatey(-340px); opacity: 0; }
}
#-webkit-keyframes glowleft {
1%{ -webkit-transform: translatey(-20px);opacity:0.5;}
2%{ -webkit-transform: translatey(-20px);opacity:1;}
13% { -webkit-transform: translatey(-150px); opacity: 1 }
40% { -webkit-transform: translatey(-340px); opacity:0.5;}
50% { -webkit-transform: translatey(-340px); opacity:0;}
100% { -webkit-transform: translatey(-340px); opacity: 0; }
}
#keyframes glowleft {
1%{ -webkit-transform: translatey(-20px);opacity:0.5;}
2%{ -webkit-transform: translatey(-20px);opacity:1;}
13% { -webkit-transform: translatey(-150px); opacity: 1 }
40% { -webkit-transform: translatey(-340px); opacity:0.5;}
50% { -webkit-transform: translatey(-340px); opacity:0;}
100% { -webkit-transform: translatey(-340px); opacity: 0; }
}
I know it's a mess, but please help.
You messed up teh keyframes...and you are missing the "#-moz-keyframes glowleft" section:
try this:
#-moz-keyframes glowleft {
1%{ -moz-transform: translatey(-20px);opacity:0.5;}
2%{ -moz-transform: translatey(-20px);opacity:1;}
13% { -moz-transform: translatey(-150px); opacity: 1 }
40% { -moz-transform: translatey(-340px); opacity:0.5;}
50% { -moz-transform: translatey(-340px); opacity:0;}
100% { -moz-transform: translatey(-340px); opacity: 0; }
}
#-webkit-keyframes glowleft {
1%{ -webkit-transform: translatey(-20px);opacity:0.5;}
2%{ -webkit-transform: translatey(-20px);opacity:1;}
13% { -webkit-transform: translatey(-150px); opacity: 1 }
40% { -webkit-transform: translatey(-340px); opacity:0.5;}
50% { -webkit-transform: translatey(-340px); opacity:0;}
100% { -webkit-transform: translatey(-340px); opacity: 0; }
}
#keyframes glowleft {
1%{ transform: translatey(-20px);opacity:0.5;}
2%{ transform: translatey(-20px);opacity:1;}
13% { transform: translatey(-150px); opacity: 1 }
40% { transform: translatey(-340px); opacity:0.5;}
50% { transform: translatey(-340px); opacity:0;}
100% { transform: translatey(-340px); opacity: 0; }
}
Related
Hello I have a button that pulses in css3 (works great) what I want it to do is pulse every 12sec...how can I do this?
.pulse {
animation-name: pulse_animation;
animation-duration: 10000ms;
transform-origin:70% 70%;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#keyframes pulse_animation {
0% { transform: scale(1); }
30% { transform: scale(1); }
40% { transform: scale(1.08); }
50% { transform: scale(1); }
60% { transform: scale(1); }
70% { transform: scale(1.05); }
80% { transform: scale(1); }
100% { transform: scale(1); }
}
I have set the duration to 3sec to let you see exactly how does it work. You can freely adjust the duration by urself. Just change 3s into 12s.
https://jsfiddle.net/bL164jj8/
.pulse {
animation-name: pulse_animation;
animation-duration: 3s;
transform-origin: 70% 70%;
animation-iteration-count: infinite;
animation-timing-function: linear;
height: 100px;
width: 100px;
background-color: lightblue;
}
#keyframes pulse_animation {
0% {
transform: scale(1);
}
8% {
transform: scale(1.01);
}
16% {
transform: scale(1.02);
}
24% {
transform: scale(1.03);
}
32% {
transform: scale(1.04);
}
40% {
transform: scale(1.05);
}
50% {
transform: scale(1.06);
}
58% {
transform: scale(1.05);
}
66% {
transform: scale(1.04);
}
74% {
transform: scale(1.03);
}
82% {
transform: scale(1.02);
}
90% {
transform: scale(1.01);
}
100% {
transform: scale(1);
}
}
<div class='pulse'>
</div>
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 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;
...
}
I am trying to add a slide up from the bottom CSS3 Animation to the <main> element in this site, but the animation is not playing / taking place.
Any idea why?
Here is the link to the page where it is not happening: https://dl.dropboxusercontent.com/u/270523/help/animate/new.html
And here is the CSS for the 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-duration:1s;
-moz-animation-duration:1s;
-ms-animation-duration:1s;
-o-animation-duration:1s;
animation-duration:1s;
}
#-webkit-keyframes bounceInUp {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(-30px);
}
80% {
-webkit-transform: translateY(10px);
}
100% {
-webkit-transform: translateY(0);
}
}
#-moz-keyframes bounceInUp {
0% {
opacity: 0;
-moz-transform: translateY(2000px);
}
60% {
opacity: 1;
-moz-transform: translateY(-30px);
}
80% {
-moz-transform: translateY(10px);
}
100% {
-moz-transform: translateY(0);
}
}
#-o-keyframes bounceInUp {
0% {
opacity: 0;
-o-transform: translateY(2000px);
}
60% {
opacity: 1;
-o-transform: translateY(-30px);
}
80% {
-o-transform: translateY(10px);
}
100% {
-o-transform: translateY(0);
}
}
#keyframes bounceInUp {
0% {
opacity: 0;
transform: translateY(2000px);
}
60% {
opacity: 1;
transform: translateY(-30px);
}
80% {
transform: translateY(10px);
}
100% {
transform: translateY(0);
}
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
-moz-animation-name: bounceInUp;
-o-animation-name: bounceInUp;
animation-name: bounceInUp;
}
On your HTML code, you mistyped here:
<link rel="stylsheet" href="animate.css" type="text/css">
It's "stylesheet" !
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;
}