过渡轻松但不适应轻松

Question

悬停文本时的转换缓入，但当mouseOver文本时不会缓和。

代码如下：

＆＃13;

＆＃13;

.span-style{
           font-size: 1.2em;
            transition:all 1s ease-out;
}       
.span-style:hover{
    border-left:4px solid;
    border-right:4px solid;
    transition:all 0.5s ease-in;
}

＆＃13;

<div class=" span-style">
     <span class="span-style__1"> Duration</span>
     <span class="span-style__2"> 40 Days</span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这不是定时函数本身的问题，但是您没有为要转换回的属性赋予元素正确的默认值。在默认状态下添加零宽度边框：

.span-style{
    font-size: 1.2em;
    border-left:0px solid;
    border-right:0px solid;
    transition:all 1s ease-out;
}       
.span-style:hover{
    border-left:4px solid;
    border-right:4px solid;
    transition:all 0.5s ease-in;
}

<div class=" span-style">
     <span class="span-style__1"> Duration</span>
     <span class="span-style__2"> 40 Days</span>
</div>