CSS伪元素变换是不稳定的

Question

我有一个基本的CSS过渡，我在其中旋转伪::after元素并在悬停时增加其宽度。然而，元素过渡是不稳定的，并且在中途跳过大部分动画。

在 Code Pen 中复制的问题。

我尝试使用-webkit-backface-visibility: hidden;来解决问题，但我似乎无法阻止过渡闪现。有什么想法吗？

转型css：

a {
    position: relative;
    text-decoration: none;
    color: #db421c;
    -webkit-box-shadow: inset 0px 4px 0px #fff;
       -moz-box-shadow: inset 0px 4px 0px #fff;
         -o-box-shadow: inset 0px 4px 0px #fff;
            box-shadow: inset 0px 4px 0px #fff;

    -webkit-transition: all 0.5s ease-in-out;
       -moz-transition: all 0.5s ease-in-out;
         -o-transition: all 0.5s ease-in-out;
            transition: all 0.5s ease-in-out;


}
a + a {
    margin-left: 20px; 
}
a::after{
    width: 20px;
    height: 1px;
    content: " ";
    background: black;
    position: absolute;
    -webkit-transform: rotate(90deg) translate(55%, 10%);
       -moz-transform: rotate(90deg) translate(55%, 10%);
         -o-transform: rotate(90deg) translate(55%, 10%);
            transform: rotate(90deg) translate(55%, 10%);

    webkit-transition: all 0.5s ease-in-out;
      -moz-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
           transition: all 0.5s ease-in-out;


}
a:last-child::after {
    content: none;
}

a:hover {
    color: black;
}

a:hover::after {
    width: 100%;
    height: 2px;
    -webkit-transform: rotate(180deg) translate(100%, -20px);
       -moz-transform: rotate(180deg) translate(100%, -20px);
         -o-transform: rotate(180deg) translate(100%, -20px);
            transform: rotate(180deg) translate(100%, -20px);

}

Answer 1

我将问题隔离到translate转换;虽然我觉得解决方案在transform-origin属性中，但我不确定如何解决它。我能想出的唯一可行解决方案是使用定位来移动伪元素。正在使用相同的旋转，我们只是使用absolute定位来翻译元素。鉴于父元素相对定位，该方法没有任何明显的问题。此方法也适用于宽度不同的元素。

UPDATED EXAMPLE HERE - 它会产生完全相同的效果，而不会出现波动。

而不是translate(55%, 10%)，请使用top: 10px / right: -22px

而不是translate(100%, -20px)，请使用top: 22px / right: 0px

更新了CSS

a::after {
    width: 20px;
    height: 1px;
    content: " ";
    background: black;
    position: absolute;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    top: 10px;
    right: -22px;
}
a:hover::after {
    width: 100%;
    height: 2px;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
    top: 22px;
    right: 0px;
}