Javascript vs. CSS-Animation

[Grille]

Hallo,

eigentlich arbeite ich gerade an meinem Slider-Projekt, welches wegen mangelnder Fähigkeiten leider etwas schleppend voran geht. Auf der Suche nach "Inspiration" bon ich dabei auf diesen Slider gestoßen:

http://tympanus.net/codrops/2014/03/18/inspiration-for-item-transitions/

(bitte klick auf DEMO machen und angucken)

Wenn ich das ganze richtig verstehe, sorgt der Javascript-Teil nur dafür, dass die Klassen der Listenelemente getauscht werden. Über CSS wird dann eine Animation durchgeführt. Als CSS findet sich zum Beispiel so etwas:

.fxCoverflow .navInNext {
    -webkit-animation: rotate3DSlideInRight 0.3s 0.1s forwards;
    animation: rotate3DSlideInRight 0.3s 0.1s forwards;
}

.fxCoverflow .navOutPrev {
    -webkit-animation: rotate3DSlideOutRight 0.3s forwards;
    animation: rotate3DSlideOutRight 0.3s forwards;
}

.fxCoverflow .navInPrev {
    -webkit-animation: rotate3DSlideInLeft 0.3s 0.1s forwards;
    animation: rotate3DSlideInLeft 0.3s 0.1s forwards;
}

@-webkit-keyframes rotate3DSlideOutLeft {
    to {
        -webkit-transform: translateX(-40%) rotateY(45deg) translateZ(-300px);
        opacity: 0;
    }
}

@keyframes rotate3DSlideOutLeft {
    to {
        transform: translateX(-40%) rotateY(45deg) translateZ(-300px);
        opacity: 0;
    }
}

Ich bin auch ehrlich: ich finde es sieht richtig gut aus!

Jetzt aber:

Meint ihr, das "darf" man jetzt schon nutzen oder sollte man besser die Finger davon lassen, da vielleicht viele Browser diesen CODE nicht verstehen****?

Gruß,
Grille.

 

[SpiceLab]

Meint ihr, das "darf" man jetzt schon nutzen oder sollte man besser die Finger davon lassen, da vielleicht viele Browser diesen CODE nicht verstehen****?

Zitat aus dem Artikel:

Please note that in some examples we are using CSS Animations on pseudo-elements which might not be supported in some browsers (especially mobile browsers).

Please also note that the examples only serve for your inspiration. We haven’t implemented any fallbacks.

Resourcen wie CSS3 Browser Support Reference, oder Demos » Browser Support Checklist CSS3, oder auch Can I use... Support tables for HTML5, CSS3, etc bieten einen Überblick zur einzelnen Browserkompatibilität.