*SOLVED* CSS animation doesn't want to work - Any ideas?

Development Code
1

I ended up figuring out the problem myself after rereading all of the code a bit more thoroughly. Thanks to everybody who tried to help!

This is an animation that won't work on my Tumblr page. The Tumblr code is no different than normal HTML and CSS.

----Here's the CSS: (ignore any grey blocks specifying that I'm typing code; I can't get this damn forum to show coding right for some reason. The CSS ends just before the HTML begins)

.animated2 { 
-webkit-animation-duration: 2s; 
animation-duration: 2s; 
-webkit-animation-fill-mode: both; 
animation-fill-mode: both; 
-webkit-animation-timing-function: ease-in-out; 
animation-timing-function: ease-in-out;

}

@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-200px) scale(0.5,0.5);
}
30% {
opacity: 1;
-webkit-transform: translateY(400px) scale(1.5,1.5);

}
}
100% { 
    opacity: 1; 
    -webkit-transform: translateY(0) scale(1.2,1.2);
}

}

@keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-200px) scale(0.5,0.5);
}
30% {
opacity: 1;
-webkit-transform: translateY(400px) scale(1.5,1.5);

}
}
100% { 
    opacity: 1; 
    -webkit-transform: translateY(0) scale(1.2,1.2);
}

}

.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}

----Here's the HTML Div line that links the CSS to the element:

{block:IfLogoImage}
<div class="logo animated2 fadeInDown"><a href="/"><img src="{image:Logo}" alt={Title}></a></div>
{/block:IfLogoImage}

2

sorry but I just have to ask. What browsers have you checked this with?

1 Like
3

if the code your talking about is the zoom in to bounce back it is working.

4

Firefox, Safari, IE, Chrome (My default browser), and that new browser that came with Windows 10 (the name escapes me).

5

Huh. Does it work for you here? nibroc99productions.tumblr.com

6

yeah. it works :)

7

You can see the animation on my page then? It's so odd that I can't see it on any of the browsers I've tried.

8

What browser are you using in which the animation works? The description and links work for me, but not the logo that says "NIBROC99."

9

the logo is not working. are you trying to make it do the same effect?

10

Yes, but more exaggerated. I want the logo to center itself on the screen (or at least move to a spot on the screen that looks like the center), stay there for just a moment, and then ease back into the position you see it in.

11

i got it to follow the description.

12

I managed to fix it! It was the dumbest thing, and I didn't think of it for months... I had an extra curly bracket in the CSS.

13

@Nibroc99 I don't see it moving.

{block:IfLogoImage}

)div class="logo animated fadeInDowndesc

14

clear your browser cache and try again

15

Check again on my site, the animation should now be working.

16

Yep. It's working now.