CODEWITHSUNDEEP
cssanimationjquery-animatecss-transitions
Xav
Xav

Reputation: 307

Should I use js or css for page animations?

I want to add page animations to a website - so on every page load it would fade the whole page in gently. But I'm worried about two things: firstly, seo - I'm not sure if using js or css could potentially hide content from search engines. Secondly, I'm also worried that if the js fails for whatever reason, or the person's browser doesn't support css3 then the page won't display at all (if the content is set to opacity 0 or display:none)

Aside from the whole page load effect, I will also be looking to do some simple animations on other page elements when they're scrolled into view.

I've seen a few libraries such as animate.css, Animsition and Tween Lite that Google recommends. But not sure which to go for. What is the preferred, best practice method for this?

Thanks for any help

Upvotes: 0

Views: 104

Answers (1)

Cedric Reichenbach
Cedric Reichenbach

Reputation: 9319

I'm not sure if using js or css could potentially hide content from search engines

It won't. In general, search engines just parse HTML code and don't care about JS/CSS. If some engine would utilize them, you can assume it would be smart enough to not misinterpret your animations.

Should I use js or css for page animations?

There is no definitive answer to this question, both have advantages and drawbacks. Here's a nice overview. Personally, I like CSS animations/transitions better, since they're a bit cleaner to implement.

Secondly, I'm also worried that if the js fails for whatever reason, or the person's browser doesn't support css3 then the page won't display at all

Just make sure your layout defaults to a usable state when some technologies don't work. For instance, this JSFiddle contains an animation that only works on Firefox, but defaults to the end state and thus is also usable in other browsers, just without the fancy entrance effect.

Relevant Code:

body {
    background-color: black;
    color: white;
    -moz-animation: fadeIn 5s;
}

@keyframes fadeIn {
    from {
        background-color: white;
    }
    to {
        background-color: black;
    }
}

Upvotes: 1

Related Questions