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

keyframes中，用opacity替换display:none,display:block
display是瞬间值，不能做补间动画

另外，建议将bottom替换成transform，因为bottom涉及浏览器重排，用transform性能能提高不少