箭头在 CSS 中弹跳到右下角答案

【问题标题】：Arrow bouncing to the bottom right corner in CSS箭头在 CSS 中弹跳到右下角
【发布时间】：2017-11-16 20:08:22
【问题描述】：

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

我尝试过使用“反弹”，但实际上“摇摆”似乎更好看。我正在寻找的是此页面的动画类型：

http://ianlunn.github.io/Hover/（称为“向右下方摆动”）

.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);
    }
}

【问题讨论】：

能不能加个gif或者带片尾动画的图片。另外添加一个完整的例子会有所帮助。
如果你想要二维变换，使用translate(x,y) 而不是translateX(x)
我更喜欢使用 CSS 而不是 gif。我添加了一张图片来展示我所追求的那种动画。谢谢
@fen1x 是的，这可能是我需要使用的。但不确定 (x,y) 的值应该是多少才能使动画平滑到右下角并备份？

标签： css animation transform

【解决方案1】：

您必须使用 translate(x,y) 而不是 translateX(x) 进行二维转换，正如上面评论中提到的@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);
}
}

【讨论】：

完美！完全按照需要工作。谢谢