Javascript css3不'；当在旧浏览器中使用jquery时，不能在现代浏览器中设置动画_Javascript_Css_Modernizr

Javascript css3不'；当在旧浏览器中使用jquery时，不能在现代浏览器中设置动画

javascript css

Javascript css3不'；当在旧浏览器中使用jquery时，不能在现代浏览器中设置动画,javascript,css,modernizr,Javascript,Css,Modernizr,我有一个问题，希望你能在这方面帮助我。我正试图建立一个网页兼容现代和旧浏览器。因此，我使用了modernizer.js，对于.cssanimations类，我编写了一段代码，在支持css3时使用它所以我写了下面的代码： .loaded .main-menu .item:nth-child(2){ top:calc(50% - 25px); left:calc(50% - 25px); background-color:yellow; opacity:0; } .cssanimations .l

我有一个问题，希望你能在这方面帮助我。我正试图建立一个网页兼容现代和旧浏览器。因此，我使用了

modernizer.js

，对于

.cssanimations

类，我编写了一段代码，在支持css3时使用它

所以我写了下面的代码：

.loaded .main-menu .item:nth-child(2){
top:calc(50% - 25px);
left:calc(50% - 25px);
background-color:yellow;
opacity:0;
}
.cssanimations .loaded .main-menu .item:nth-child(2){
-webkit-animation:moveicon2 1s forwards 0.1 cubic-bezier(0.42, 0, 0.05, 1.87);
-moz-animation:moveicon2 1s forwards 0.1 cubic-bezier(0.42, 0, 0.05, 1.87);
-o-animation:moveicon2 1s forwards 0.1 cubic-bezier(0.42, 0, 0.05, 1.87);
animation:moveicon2 1s forwards 0.1 cubic-bezier(0.42, 0, 0.05, 1.87);
}

而不是这些代码：

.main-menu .item:nth-child(2){
top:calc(50% - 25px);
left:calc(50% - 25px);
background-color:yellow;
opacity:0;
-webkit-animation: moveicon2 1s forwards 0.1s cubic-bezier(0.42, 0, 0.05, 1.87);
-moz-animation: moveicon2 1s forwards 0.1s cubic-bezier(0.42, 0, 0.05, 1.87);
-o-animation: moveicon2 1s forwards 0.1s cubic-bezier(0.42, 0, 0.05, 1.87);
animation: moveicon2 1s forwards 0.1s cubic-bezier(0.42, 0, 0.05, 1.87);
}

这是我的html代码：

<html class="no-js cssanimations">
<head>
//
</head>

<body class="loaded">
<section id="sectionOne" class="section section-1">
<div class="main-menu">
<a href="#sectionOne" class="item">A</a>
<a href="#sectionTwo" class="item">B</a>
<div class="item">menu</div>
</div>
</section>


//
菜单

但它不工作，我的动画也没有正确运行。对于某些元素，它确实起作用，但对于其他一些元素，动画根本不起作用

请让我知道我的错在哪里？

你应该添加一个有效的代码片段。@SergeyDenisov我不明白你的意思是什么？我确实尽可能地使用了所有必要的代码。例如，我的意思是，我想补充一点，如果你试图支持所有浏览器，你应该避免使用CSS calc属性。请为moveicon2添加一个工作代码笔和CSS。谢谢大家。我知道发生了什么事。不幸的是，我在相同的元素上使用了css3动画和gsap.js动画。这就是为什么我的动画没有得到很好的执行。因此，我将该元素上的GSAP更改为jquery动画，问题就解决了。非常感谢您的评论。