Animatin :before element that is inside hovered div - html

Question

Ive got some problems with animating :before element. It's a little bit messy but im leaving it at stage that i ended my job. So everytinhgs work beside that :before element - arrow in FA. It should smoothly slide to right side, but its only jumping eaven with transition time seted up.
HTML and 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

Transition goes from initial value to a new value and bounces back.
You do not have an initial left property set for your element.
Just add left: 0 to the initial stats and it should work.
.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>