Question

我尝试使用具有不透明度和显示属性的显示/隐藏菜单的关键帧，但显示属性在动画结束时不会改变..这是我的代码，这是错误的吗？

#menu {
    background-color: #c1e5ff;
    position: fixed;
    z-index: 10;
    height: 100%;
    width: 100%;

    display: none;

    -moz-animation: close_menu 600ms forwards;
    -webkit-animation: close_menu 600ms forwards;
    -o-animation: close_menu 600ms forwards;
    -ms-animation: close_menu 600ms forwards;
    animation: close_menu 600ms forwards;
}

#menu.open {
    display: block;

   -moz-animation: open_menu 600ms forwards;
   -webkit-animation: open_menu 600ms forwards;
   -o-animation: open_menu 600ms forwards;
   -ms-animation: open_menu 600ms forwards;
    animation: open_menu 600ms forwards;
}


@-moz-keyframes open_menu {
    0% {
        opacity:0;
        display: none;
    }
    1% {
        opacity:0;
        display: block;
    }
    100% {
        opacity:1;
        display: block;
    }
}

@-webkit-keyframes open_menu {
    0% {
        opacity:0;
        display: none;
    }
    1% {
        opacity:0;
        display: block;
    }   
    100% {
        opacity:1;
        display: block;
    }
}

@keyframes open_menu {
    0% {
        opacity:0;
        display: none;
    }
    1% {
        opacity:0;
        display: block;
    }   
    100% {
        opacity:1;
        display: block;
    }
}


@-moz-keyframes close_menu {
    0% {
        opacity:1;
        display: block;
    }
    99% {
        opacity:0;
        display: block;
    }
    100% {
        opacity:0;
        display: none;
    }
}

@-webkit-keyframes close_menu {
    0% {
        opacity:1;
        display: block;
    }
    99% {
        opacity:0;
        display: block;
    }
    100% {
        opacity:0;
        display: none;
    }
}

@keyframes close_menu {
    0% {
        opacity:1;
        display: block;
    }
    99% {
        opacity:0;
        display: block;
    }
    100% {
        opacity:0;
        display: none;
    }
}

Answer 1

因为时间 - 功能太快，没有错误你应该把更多的时间放在：

   -webkit-animation: open_menu 4s forwards;

关键帧动画显示块/无

1 个答案: