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

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

闭关修行中......

reply all(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

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template