css实现鼠标移入移出动画效果逆向

鼠标移入添加动画，移出后逆向动画效果实现

核心知识点：transition hover
html代码：

            <div class="content-left-nav">
                <div class="active-yscy-left">能源工业div>
                <div class="">石油化工div>
                <div class="">有色冶金div>
                <div class="">装备制造div>
                <div class="">中医中药div>
                <div class="">文旅康养div>
                <div class="">通道物流div>
                <div class="">数据信息div>
                <div class="">现代农牧div>
                <div class="">基础建设div>
            div>

css代码实现：

.content-left-nav div{
    cursor: pointer;
    padding-left: 0;
    transition: padding-left .1s;
    -webkit-transition: padding-left .1s; /* Safari */
}
.content-left-nav div:hover{
    padding-left: 15px;
}

效果展示：