Question

我有一个问题，希望你能帮助我。我正在尝试构建一个与现代和旧浏览器兼容的网页。所以我使用Modernizr.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>

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

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

在旧浏览器中使用jquery时，css3在现代浏览器中没有动画

0 个答案: