css3 - animation属性，safari浏览器不支持相关效果

Question

点击按钮，从底部滑出一个对话框效果，在其他浏览器都可以正常滑出，但是在safari浏览器中不能弹出！当去掉下面这段CSS3代码后，就可以正常弹出效果，请问safari不支持animation 属性嘛？

.nctouch-bottom-mask.up {
    display: block;
    bottom: 44px;
    -webkit-animation: optionBlockUp 0.5s ease-in-out;
    animation: optionBlockUp 0.5s ease-in-out;
}

@-webkit-keyframes optionBlockUp
{
    from {
        display: none;
        bottom: -100%;
    }
    to {
        display: block;
        bottom: 0;
    }
}
@keyframes optionBlockUp
{
    from {
        display: none;
        bottom: -100%;
    }
    to {
        display: block;
        bottom: 0;
    }
}

Answer 1

In keyframes, use opacity to replace display:none, display:block
display is an instant value and cannot be used for tween animation

In addition, it is recommended to replace bottom with transform, because bottom involves browser reflow, and using transform can improve the performance a lot