为什么我的CSS动画在iPhone的Safari上不起作用，但它可以在其他任何地方使用？

Question

我正在制作一个HTML/CSS网站(没有javascript)，在我的导航菜单中，我有一个关键帧动画，开始于:hover和:active(出现子菜单)。

问题:这个动画适用于笔记本电脑上的所有导航器(包括Safari)，以及android手机上的所有(至少是我测试过的所有)导航器，但在iphone上，它不能与Safari一起工作，但可以与chrome等其他导航器一起工作。

这是我的第一个真正的网站，我从来没有遇到过这种问题，所以我不知道是什么原因造成的。

我试过了:我试着在任何地方添加-webkit-前缀，我认为它可能是有用的-不工作。我尝试分解我的动画参数(使用animation-name:， animation-duration:等)。而不是所有的动画:)——也不工作。

这就是我能想到的。

Safari开发工具:另一件事(我不知道这是否重要)是，我有一个mac，所以我使用Safari的开发工具来定位问题，但问题没有出现在那里。所以我基本上是在盲目工作，因为我的手没有放在iPhone上，我不知道是否有其他工具可以用来模仿iPhone。

谢谢你的帮助!

.menu-primaire {
transition: all 500ms;
&:hover, &:active {
& .head_liste__secondaire {
display: inline-block;
position: relative;
top:   25px;
right: 34%;
padding: 0px;
@media screen and (max-width: 768px) {
right: 0;
}
@media screen and (max-width: 425px) {
position: absolute;
top: 70px;
}
}
}
}
.menu-secondaire {
-webkit-animation-name: menu;
-moz-animation-name:    menu;
animation-name:         menu;
-webkit-animation-duration: 500ms;
-moz-animation-duration:    500ms;
animation-duration:         500ms;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode:    both;
animation-fill-mode:         both;

@for $i from 1 through 4 {
&--#{$i} {
-webkit-animation-delay: 100ms * $i;
-moz-animation-delay:    100ms * $i;
animation-delay:         100ms * $i;
}
}
}
@-webkit-keyframes menu {
0% {
-webkit-transform: translate3d(0,10px,0);
opacity: 0;
}
100% {
-webkit-transform: translate3d(0,0,0);
opacity: 1;
}
}
@-moz-keyframes menu {
0% {
-moz-transform: translate3d(0,10px,0);
opacity: 0;
}
100% {
-moz-transform: translate3d(0,0,0);
opacity: 1;
}
}
@keyframes menu {
0% {
transform: translate3d(0,10px,0);
opacity: 0;
}
100% {
transform: translate3d(0,0,0);
opacity: 1;
}
}

<nav>
<ul class="head_liste">
<li class="head_liste__primaire menu-primaire"><a href="#">Button 1</a></li>
<li class="head_liste__primaire menu-primaire">Button 2
<ul class="head_liste__secondaire">
<li class="menu-secondaire menu-secondaire--1"><a href="#">Button 1a</a></li>
<li class="menu-secondaire menu-secondaire--2"><a href="#">Button 1b</a></li>
<li class="menu-secondaire menu-secondaire--3"><a href="#">Button 1c</a></li>
<li class="menu-secondaire menu-secondaire--4"><a href="#">Button 1d</a></li>
</ul>
<li class="head_liste__primaire menu-primaire"><a href="#">Button 3</a></li>
</ul>
</nav>

Answer 1

如果有人有类似的问题，这里是我所做的工作(包括JavaScript)。

我创建了一个for "button 2"，添加了一个onclick="函数，在单击时添加新类。从那以后，我和全班同学一起工作。

也许不完美，需要JS，但它为我工作!