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; }}

问题解答

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

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