アニマティン：ホバリングされたdiv内にある要素の前に

Question

Iveはanimating：before要素でいくつかの問題を抱えていました。ちょっと面倒ですが、私は仕事を終えた段階でそれを残しています。ですから、すべての訴訟は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>