CSS Animation not playing - css

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" !

Related

css3 pulse effect delay

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>

How can I delay a css animation until the element is visible?

I have this animation that makes a h1 and p "fly in":
#-moz-keyframes titledrop {
0% {
-moz-transform: translateY(-80px);
}
100% {
-moz-transform: translateY(0);
}
}
#-webkit-keyframes titledrop {
0% {
-webkit-transform: translateY(-80px);
}
100% {
-webkit-transform: translateY(0);
}
}
#keyframes titledrop {
0% {
transform: translateY(-80px);
}
100% {
transform: translateY(0);
}
}
#-moz-keyframes drop2 {
0% {
-moz-transform: translateY(-80px);
}
100% {
-moz-transform: translateY(0);
}
}
#-webkit-keyframes drop2 {
0% {
-webkit-transform: translateY(-80px);
}
100% {
-webkit-transform: translateY(0);
}
}
#keyframes drop2 {
0% {
transform: translateY(-80px);
}
100% {
transform: translateY(0);
}
}
But sometimes the animation starts before the element is visible, so it looks like nothing happened. How can I delay a css animation until the element is visible?

CSS rotate animation

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>

Translate not working on Firefox, please, does anyone know why?

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; }
}

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;
...
}

Resources