Я создал анимированную стрелку в одной иконке. Все идет нормально. Однако, он внезапно смещается влево на мгновение во время последовательности, что делает всю анимацию шаткой.
Вот ручка, чтобы увидеть анимацию в действии:
https://codepen.io/erwinvanlun/pen/VxWQQy?editors=1100
Ниже кода. Любая подсказка, что происходит?
HTML:
<div style="font-size: 150px; line-height: 100%;
color: darkgrey;">
<i class="icon-fold"></i></div>
CSS:
i.icon-fold {
position: relative;
display: inline-block;
font-style: normal;
box-sizing: border-box;
}
i.icon-fold {
vertical-align: bottom;
margin: .1em .2em 0 .2em;
border: .3em solid transparent;
border-bottom-color: currentColor;
border-width: 0;
animation: scale 5s linear infinite;
animation-play-state: paused;
}
i.icon-fold:before, i.icon-fold:after {
content: "";
position: absolute;
box-sizing: border-box;
left: -.3em;
border: .3em solid transparent;
border-bottom-color: currentColor;
}
i.icon-fold:before {
top: -.9em;
transition: opacity 5s linear;
animation: fade 5s linear infinite;
animation-play-state: paused;
}
i.icon-fold:after {
top: -.6em;
}
i.icon-fold:hover, {
animation-play-state: running;
&:after, &:before {
// transform:translateY(-.1em);
animation-play-state: running;
}
}
@keyframes fade {
0% {
opacity: 1;
}
99% {
opacity: 0;
}
}
@keyframes scale {
0% {
left: .3em;
border-width: 0;
}
99% {
left: 0em;
border-width: .3em;
}
}