css3 放大加移动效果

时间:2020-05-21
本文章向大家介绍css3 放大加移动效果,主要包括css3 放大加移动效果使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

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