Question

我想为“右箭头”制作动画，并从左到右进行翻译。或者，因为我的箭头是使用“ transform”属性创建的，所以我的动画同时应用于两种变换（旋转和平移）...

在下面的示例中，箭头被动画平移和旋转。我希望只翻译它。我该怎么办？

i {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
}

.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transition: transform 400ms ease !important;
}

.link-page-1 p {
            cursor:pointer;
}

.link-page-1:hover p {
    color: #727272 !important;

}

.link-page-1:hover .right  {
    transform: rotate(-45deg);
transform: translate(10px,0px);

}

<p class="link-page-1" style="font-size:20px; color:black;">En savoir plus  <i class="arrow right"></i></p>

感谢您的帮助！

Answer 1

现在您有多个transforms，这只会导致最后一个（translate）生效，并且会将rotate缺省设置为0。您需要做的是将rotate和translate合并为一个transform：

i {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
}

.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transition: transform 400ms ease !important;
}

.link-page-1 p {
            cursor:pointer;
}

.link-page-1:hover p {
    color: #727272 !important;

}

.link-page-1:hover .right  {
    transform:rotate(-45deg) translate(10px,0px);
    -webkit-transform:rotate(-45deg) translate(10px,0px);
}

<p class="link-page-1" style="font-size:20px; color:black;">En savoir plus  <i class="arrow right"></i></p>

Answer 2

请参考以下代码，您需要将平移和旋转与空格分隔的属性结合使用。我希望这是您要寻找的。

i {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
}

.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transition: transform 400ms ease !important;
}

.link-page-1 p {
            cursor:pointer;
}

.link-page-1:hover p {
    color: #727272 !important;

}

.link-page-1:hover .right  {
    
transform: translate(10px) rotate(-45deg);

}

<p class="link-page-1" style="font-size:20px; color:black;">En savoir plus  <i class="arrow right"></i></p>

动画翻译右箭头

2 个答案: