2 replies [Last post]
gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 4 years 52 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

ok suppose i have the following animation keyframe :

@keyframes bounceInRight {
  0%, 60%, 75%, 90%, 100% {
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
 
  0% {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }
 
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
 
  75% {
    transform: translate3d(10px, 0, 0);
  }
 
  90% {
    transform: translate3d(-5px, 0, 0);
  }
 
  100% {
    transform: none;
  }
}

how do i make sure this animation is compatible with most modern browsers ?? i mean how do i get to know , how many prefixes i have to apply before the keyframes ?? Where do i look for Which browsers support keyframes but with prefixes only ?? and which browsers support this property without prefixes .

I found a nice site : can i use

but now how do i extract frm this site which properties are supported in browsers with prefixes and without prefixes ??

i know its a bit of a dumb question , but its important for me to know and so i ask .

if there is any doubt about my question , please refer to the title of the question.

Thanks .

Gautam.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 28 weeks 3 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Some references

The first is Tony's own charts. I don't know for sure if they're up-to-date, as there have been a lot of changes in both the specs and in browser versions. CSSCreator.

Next, and one of the most respected, is Peter-Paul Koch's site, Quirks Mode.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 4 years 52 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

@gary thanks

thank you gary ..