css3 放大渐变动画效果

div+css

直接上代码

<html>
<head>
<style> 
          @-webkit-keyframes zoomIn {
                0% {
                    -webkit-transform: scale(.2,.2);
                    opacity: 0;
                    transform: scale(.2,.2)
                }

                50% {
                    opacity: 1
                }
            }
          @keyframes zoomIn {
                0% {
                    -webkit-transform: scale(.2,.2);
                    opacity: 0;
                    transform: scale(.2,.2)
                }

                50% {
                    opacity: 1
                }
            }

            .title {
                max-width: 320px;
                height: auto;
                -webkit-animation: zoomIn 1s;
                animation: zoomIn 1s;
            }
</style>
</head>

<body>
<img class="title" src="https://pdbn.top/uploads/2019/07/2019071207101334.jpg">
</body>

</html>
查看效果下载