css动画效果

<style>
    .title{
        margin-left: 30px;
        margin-top: 50px;
        width: 500px;
        height: auto;
    }
    .title span{
        color: black;
        font-size: 26px;
        background-image: linear-gradient(to right,#373B44,#4286f4);
        background-repeat: no-repeat;
        background-position: right bottom;
        background-size: 0 2px;
        transition-property: background-size;
        transition-duration: 800ms;
    }
    .title span:hover{
        background-position-x: left;
        background-size: 100% 2px;
    }
</style>


 <div class="title">
    <span>
        三维。人所处的是三维的空间,包括前后、左右、上下、前后等,但不包括中心点。
        而二维世界没有方向的限制,只有前后、左右或上下。
    </span>
 </div>