我无法在safari上使用反向动画。有人知道为什么反向动画(globalnavholder.searchhide)在每个浏览器上都运行良好,除了在safari上?我发现,safari有时候不喜欢反向动画或者不支持这种动画,但是如果我为safari设置了一个自己的反向动画,它甚至都行不通。原始动画(#globalnavholder.searchopen)在safari上运行良好。
@-webkit-keyframes list-searchshow {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1);
animation-timing-function: cubic-bezier(1, 0, 0, 1);
}
100% {
-webkit-transform: translateY(-100%) translateY(106px);
transform: translateY(-100%) translateY(106px);
}
}
@keyframes list-searchshow {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1);
animation-timing-function: cubic-bezier(1, 0, 0, 1)
}
100% {
-webkit-transform: translateY(-100%) translateY(106px);
transform: translateY(-100%) translateY(106px);
}
}
@media only screen and (max-width: 767px) {
#globalnavholder .content .mobile-nav-holder {
position: absolute;
z-index: 2;
top: 80px;
right: 0;
bottom: 0;
left: 0;
margin: 0;
padding: 0 48px;
overflow: hidden;
overflow-y: auto;
height: auto;
-webkit-overflow-scrolling: touch;
visibility: hidden;
-webkit-transition: visibility 0s linear 1s;
transition: visibility 0s linear 1s;
}
#menustate:checked ~ #globalnavholder .content .mobile-nav-holder,
#menustate:target ~ #globalnavholder .content .mobile-nav-holder {
visibility: visible;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
#globalnavholder.searchshow .content .mobile-nav-holder {
bottom: auto;
-webkit-animation: list-searchshow 800ms both;
animation: list-searchshow 800ms both;
}
#globalnavholder.searchopen .content .mobile-nav-holder {
display: none;
}
#globalnavholder.searchhide .mobile-nav-holder {
bottom: auto;
-webkit-animation: list-searchshow 800ms reverse both;
animation: list-searchshow 800ms reverse both;
}
}