css3 - animation属性,safari浏览器不支持相关效果
问题描述
点击按钮,从底部滑出一个对话框效果,在其他浏览器都可以正常滑出,但是在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性能能提高不少