Question

我尝试使用css3和gsap库为我的网页中的元素设置动画。我的一个元素是我的菜单项，在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;}
}

我已经完成了所有前缀的上述操作。另一方面，我根据以下代码通过gsap编写了这些代码：

TweenLite.to('.loaded .main-menu .item:nth-child(1)', 1, {x:0,z:0,y:-160,rotation:360,opacity:0.8, ease:Back.easeOut});

在客户端的浏览器中未定义css3时，使用gsap的想法是使用gsap：

    if (!Modernizr.cssanimations){
// GSAP Codes
}

我知道gsap和css3具有相同的速度但问题是我可以同时使用它们并且浏览器运行每个速度更快的浏览器。因此，当计算机处于省电模式时，运行gsap，当javascript关闭时运行css3。我希望这不是一个不合适的问题，你可以帮助我。如果不可能，请帮我识别何时应该使用哪一个？ Javascript还是css3？非常感谢。

一起使用两种类型的动画

0 个答案: