Animatin：元素内部徘徊之前div

Question

我在动画之前遇到了一些问题：元素之前。这有点凌乱，但即时离开它在我结束了我的工作的阶段。所以Everytinhgs在旁边工作：在元素之前 - FA中的箭头。它应该顺利地滑向右侧，但它只有跳跃的时间才能摆动。

HTML和CSS：

.seemore span { 
 
    overflow: hidden; 
 
    position: relative; 
 
    color: white; 
 
    left: -90px; 
 
    width: 10px !important; 
 
} 
 

 
.seemore { 
 
    overflow: hidden; 
 
    transition: all 0.35s ease-in-out; 
 
} 
 

 
.usluga:hover { 
 
    background: #dc0d1d; 
 
    transition: all 0.35s ease-in-out; 
 
} 
 

 
.seemore:hover, 
 
.seemore:focus { 
 
    /* things won't work in IE 10 without this declaration */ 
 
} 
 

 
.usluga:hover .normalfont, 
 
.usluga:hover .headerfont, 
 
.usluga:hover .seemore:before { 
 
    color: white !important; 
 
    transition: all 0.35s ease-in-out; 
 
} 
 

 
.usluga:hover .seemore span { 
 
    left: 0px; 
 
    transition: all 0.35s ease-in-out; 
 
} 
 

 
.seemore:before { 
 
    content: " "; 
 
    background: red; 
 
    widows: 10px; 
 
    height: 10px; 
 
    font-style: normal; 
 
    font-weight: normal; 
 
    text-decoration: inherit; 
 
    color: #dc0d1d; 
 
    font-size: 11px; 
 
    padding-right: 0.5em; 
 
    position: absolute; 
 
} 
 

 
.usluga:hover .seemore:before { 
 
    -webkit-transition: all 0.3s ease-out; 
 
    -moz-transition: all 0.3s ease-out; 
 
    -ms-transition: all 0.3s ease-out; 
 
    -o-transition: all 0.3s ease-out; 
 
    transition: all 0.3s ease-out; 
 
} 
 

 
.usluga:hover .seemore:before { 
 
    left: 130px; 
 
    transition: all 0.3s ease-out; 
 
}

<div class="usluga"> 
 
    <p class="headerfont" style="padding-bottom: 0.1em;">01<span class="smallfont">/print</span></p> 
 
    <p class="normalfont">Druk<br>Wielkoformatowy</p> 
 
    <p class="seemore"><span>zobacz więcej</span></p> 
 
</div>

Answer 1

转变从初始值都到了新的价值和反弹。

您没有为元素设置的初始left属性。

只需将left: 0添加到最初的统计数据，它应该工作。

.seemore span { 
 
    overflow: hidden; 
 
    position: relative; 
 
    color: white; 
 
    left: -90px; 
 
    width: 10px !important; 
 
} 
 

 
.seemore { 
 
    overflow: hidden; 
 
    transition: all 0.35s ease-in-out; 
 
} 
 

 
.usluga:hover { 
 
    background: #dc0d1d; 
 
    transition: all 0.35s ease-in-out; 
 
} 
 

 
.seemore:hover, 
 
.seemore:focus { 
 
    /* things won't work in IE 10 without this declaration */ 
 
} 
 

 
.usluga:hover .normalfont, 
 
.usluga:hover .headerfont, 
 
.usluga:hover .seemore:before { 
 
    color: white !important; 
 
    transition: all 0.35s ease-in-out; 
 
} 
 

 
.usluga:hover .seemore span { 
 
    left: 0px; 
 
    transition: all 0.35s ease-in-out; 
 
} 
 

 
.seemore:before { 
 
    content: " "; 
 
    background: red; 
 
    widows: 10px; 
 
    height: 10px; 
 
    font-style: normal; 
 
    font-weight: normal; 
 
    text-decoration: inherit; 
 
    color: #dc0d1d; 
 
    font-size: 11px; 
 
    padding-right: 0.5em; 
 
    position: absolute; 
 
    /* Setting initial 'left' value */ 
 
    left: 0; 
 
} 
 

 
.usluga:hover .seemore:before { 
 
    -webkit-transition: all 0.3s ease-out; 
 
    -moz-transition: all 0.3s ease-out; 
 
    -ms-transition: all 0.3s ease-out; 
 
    -o-transition: all 0.3s ease-out; 
 
    transition: all 0.3s ease-out; 
 
} 
 

 
.usluga:hover .seemore:before { 
 
    left: 130px; 
 
    transition: all 0.3s ease-out; 
 
}

<div class="usluga"> 
 
    <p class="headerfont" style="padding-bottom: 0.1em;">01<span class="smallfont">/print</span></p> 
 
    <p class="normalfont">Druk<br>Wielkoformatowy</p> 
 
    <p class="seemore"><span>zobacz więcej</span></p> 
 
</div>