Question

我需要一个箭头，使用CSS在悬停时稍微移动（反弹）到右下角。我已经使用了下面的代码，我喜欢它的功能但是这只会向左/向右移动箭头。如何修改它以使它稍微移动到底部？我尝试过使用＆＃39; translateY＆＃39;但无法确定动画的确切像素数量是否平滑。

我尝试过使用＆＃39;反弹＆＃39;但实际上是“摇摆”＃39;似乎看起来更好。我正在寻找的是这个页面的动画类型：

http://ianlunn.github.io/Hover/（称为＆＃39;摆动到右下角＆＃39;）

.arrow:hover{

-webkit-animation: swing 1s ease;
animation: swing 1s ease;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;

}

@-webkit-keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
       transform: translateX(-5px);
    } 
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

Answer 1

您必须使用translate（x，y）代替translateX（x）进行2d转换，如上面评论中提到的@ fen1x

试试这个：

@keyframes hvr-wobble-to-bottom-right {

16.65% {
    -webkit-transform: translate(8px, 8px);
    transform: translate(8px, 8px);
}

33.3% {
    -webkit-transform: translate(-6px, -6px);
    transform: translate(-6px, -6px);
}

49.95% {
    -webkit-transform: translate(4px, 4px);
    transform: translate(4px, 4px);
}

66.6% {
    -webkit-transform: translate(-2px, -2px);
    transform: translate(-2px, -2px);
}

83.25% {
    -webkit-transform: translate(1px, 1px);
    transform: translate(1px, 1px);
}

100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}
}

箭头弹到CSS的右下角

1 个答案: