css3 放大加移动效果

时间：2020-05-21 16:58:21 收藏：0 阅读：64

本来用的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);
            }
        }

原文：https://www.cnblogs.com/duanzhenzhen/p/12931575.html