I'm trying to animate elements in my webpage by using css3 and gsap library. One of my elements which is my menu item has the following code in css3:
.loaded .main-menu .item:nth-child(1){
top:calc(50% - 25px);
left:calc(50% - 25px);
background-color:green;
opacity:0;
-webkit-animation:moveicon1 1s forwards cubic-bezier(0.42, 0, 0.05, 1.87);
-moz-animation:moveicon1 1s forwards cubic-bezier(0.42, 0, 0.05, 1.87);
-o-animation:moveicon1 1s forwards cubic-bezier(0.42, 0, 0.05, 1.87);
animation:moveicon1 1s forwards cubic-bezier(0.42, 0, 0.05, 1.87);
}
@keyframes moveicon1{
100%{-ms-transform:translate(0px,-160px) rotate(360deg);
-o-transform:translate(0px,-160px) rotate(360deg);
-moz-transform:translate(0px,-160px) rotate(360deg);
-webkit-transform:translate(0px,-160px) rotate(360deg);
transform:translate(0px,-160px) rotate(360deg);
opacity:0.8;}
}
I've done above for all prefixes. And the other hand I wrote these code via gsap based on following code:
TweenLite.to('.loaded .main-menu .item:nth-child(1)', 1, {x:0,z:0,y:-160,rotation:360,opacity:0.8, ease:Back.easeOut});
An idea to use both together is using gsap when css3 is not define in client's browser. But I don't want to do it, because gsap has the very good speed. Unfortunately when I use both on same element, browsers who support css3 doesn't animate good via gsap.
if (!Modernizr.cssanimations){
// GSAP Codes
}
I know that gsap and css3 has the same speed But the question is can I use both together and browser run each one that has more speed. So like when the laptop is in Power Saver mode , run the gsap (because its faster in this situation) and when javascript is off run the css3. If it's not possible, help me to recognize when I should use which one? Javascript or css3? Thanks a lot.