css3 - animation属性,safari浏览器不支持相关效果
阿神
阿神 2017-04-17 11:39:48
0
1
608

点击按钮,从底部滑出一个对话框效果,在其他浏览器都可以正常滑出,但是在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;
    }
}
阿神
阿神

闭关修行中......

全員に返信(1)
大家讲道理

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

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

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート