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性能能提高不少