自己动手实现一个从底部往上滑的动画 (css3的 animation实现)

<style>
        .post-list-row{
            animation: post-list-row .9s;
            -webkit-animation: post-list-row .9s;
        }
        /*自定义动画*/
        @keyframes post-list-row {
            0% {
                opacity: 0;
                -webkit-transform: translateY(40px);
                transform: translateY(40px);
            }
            100% {
                opacity: 1;
                -webkit-transform: translateY(0);
                transform: translateY(0) scale(.9);
            }
        }
        @-webkit-keyframes post-list-row {
            0% {
                opacity: 0;
                -webkit-transform: translateY(40px);
                transform: translateY(40px);
            }
            100% {
                opacity: 1;
                -webkit-transform: translateY(0);
                transform: translateY(0) scale(.9);
            }
        }
        
    </style>

js渲染

<!--滑动动画-->
<script async>
    $(document).ready(function () {
        $('#pagination a').click(function () {
            console.log("被点击了");
            let row = $('.container .row').first().clone();
            let container = $('.container');
            row.addClass('post-list-row');
            container.append(row);

        });
    })
</script>