CODEWITHSUNDEEP
csscss-transitions
wintercounter
wintercounter

Reputation: 7488

Translate animation fallback to position

Currently i'm using elements with position: absolute for transitions but i should use translate instead. How to achive a fallback when translate is not available?

Upvotes: 2

Views: 1060

Answers (2)

wintercounter
wintercounter

Reputation: 7488

Finally, what i was doing is that i checked if CSS3 features are supported with JS. If not, i've attached a .fallback class to the body so i can make separate rules as a fallback.i've added like the following:

#animdiv{
    transform: translate(0,100px);
}
.fallback #animdiv{
    top: 100px;
}

Upvotes: 0

Ben Hays
Ben Hays

Reputation: 63

Without having any additional information, I'm assuming you'd like to use translate when it is available, and position: absolute when it is not. I found an excellent article that lists the pros and cons, and may solve some of your woes.

http://paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

Moving forward, you may want to look into the modernizr library, as it provides awesome tools for making your cutting-edge features work well on older browsers. I've posted a link to the CSS docs below.

http://modernizr.com/docs/#features-css

Upvotes: 1

Related Questions