本来用的transform: translateZ(600px) translateY(-180px);但iPhoneX版本13.4.1的机型不兼容,改成用scale实现了
.in{ animation: doorin 3s linear forwards; -webkit-animation: doorin 3s linear forwards; } @keyframes doorin{ 0%{ transform: none; } 100%{ transform: translateY(-520px) scale(3.3); /* transform: translateZ(600px) translateY(-180px); */ } } @-webkit-keyframes doorin{ 0%{ -webkit-transform: none; } 100%{ -webkit-transform: translateY(-520px) scale(3.3); } } @-moz-keyframes doorin{ 0%{ -moz-transform: none; } 100%{ -moz-transform: translateY(-520px) scale(3.3); } } @-o-keyframes doorin{ 0%{ -o-transform: none; } 100%{ -o-transform: translateY(-520px) scale(3.3); } } @-ms-keyframes doorin{ 0%{ -ms-transform: none; } 100%{ -ms-transform: translateY(-520px) scale(3.3); } }