所以我有一个菜单,使用剪辑路径显示,然后在其中,链接从0 - 1不透明度动画。这工作了一段时间,直到chrome 66.这仍然适用于Firefox,因此我不确定这是否是Chrome中的错误或它应该是的方式而且Firefox还没有被捕获起来。
@keyframes slideInDown {
from {
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
opacity: 0;
}
to {
-webkit-transform: translate3d(0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
.mobile-menu {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
background: #f1f200;
padding: 24px;
display: none;
transition: 500ms ease-out;
}
.mobile-menu {
clip-path: circle(0 at 0% 0%);
display: block;
}
.mobile-menu.active {
display: block;
clip-path: circle(200% at 0% 0%);
}
.mobile-menu.active a {
animation-name: slideInDown;
animation-duration: 0.9s;
animation-fill-mode: forwards;
animation-delay: 160ms;
}
.mobile-menu a {
color: #ff005d;
animation-name: none;
display: block;
opacity: 0;
}
https://codepen.io/picard102/pen/zjoexP
那么我现在如何在chrome中复制效果呢?
答案 0 :(得分:1)
这是错误https://bugs.chromium.org/p/chromium/issues/detail?id=823362
它在Chrome 67和68中运行良好。