css3文字上下滚动效果

 

 

 .test-wrapper{

     height: 100vh;

     .test1{

         display: inline-block;

         width:32px;

         height: 18px;

         text-align: center;

         ul {

            display: inline-block;

            margin: 0;

            padding: 0;

            animation: animation-test1 10s forwards infinite;

            li{

                display: inline-block;

                height: 18px;

                line-height: 18px;

            }

        }

 

     }

 

    @keyframes animation-test1 {

        0%{

            transform: translateY(0px)

        }

        20%{

            transform: translateY(-18px)

        }

        40%{

            transform: translateY(-36px)

        }

        60%{

            transform: translateY(-54px)

        }

        80%{

            transform: translateY(-72px)

        }

        100%{

            transform: translateY(0px)

        }

    }

 

 }