CSS 在 Y 轴上平移和缩放？

Question

我正在参加学习 CSS 的在线课程，而我们只是介绍 CSS 动画。我正在尝试通过创建一个男人沿着小路走向屏幕的小动画来练习我学到的一些东西（现在只是基本的变换）。

基本上，我想同时翻译和缩放我的图像。我得到了这个工作正常，但现在我还想添加一些小的旋转，这样看起来这个人正在轻微地左右移动。这是我在 jsfiddle 中的代码，我不知道如何更改变换原点，以便该人在 Y 轴上沿直线行走，比例尺使他沿对角线行走。我希望这是有道理的......

代码中被注释掉的部分包括比例，一旦添加回来，没有比例的部分被注释掉，这很有趣，我认为这与原点有关？

https://jsfiddle.net/qLLqdxbm/

HTML：

<div class="man-scale">
  <img class="man-walk" src="http://clipart-library.com/img/1184697.png">
</div>

CSS：

.man-walk {
    width: 100px;
    height: 125px;
    position: absolute;
    top: 0;
    left: 50px;

    animation-name: man-walk;
    animation-duration: 0.45s;
    animation-iteration-count: infinite;
}

@keyframes man-walk {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(1.5deg);
    }

    50% {
        transform: rotate(0deg);
    }

    75% {
        transform: rotate(-1.5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.man-scale {
    width: 100px;
    height: 125px;

    animation-name: man-scale;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* define the animation */
@keyframes man-scale {
/*     0% {
        transform: translate(0px, 5px) scale(1.1);
    }

    25% {
        transform: translate(0px, 15px) scale(1.5);
    }

    50% {
        transform: translate(0px, 25px) scale(1.7);
    }

    75% {
        transform: translate(0px, 35px) scale(2.0);
    }

    100% {
        transform: translate(0px, 45px) scale(2.3);
    } */

    0% {
        transform: translate(0px, 5px);
    }

    25% {
        transform: translate(0px, 15px);
    }

    50% {
        transform: translate(0px, 25px);
    }

    75% {
        transform: translate(0px, 35px);
    }

    100% {
        transform: translate(0px, 45px);
    }
}

感谢您的帮助！

Answer 1

每次沿 X 和 Y 缩放图像时，原点都会在两个维度上移动一个特定的偏移量。如果您可以补偿 X 维度中的偏移，则可以实现垂直动画。

在这种情况下，在第一个关键帧中，比例增加了 0.1，即 100 * 0.1 = 10px 现在原点在 X 维度上偏移了 5px，以 translateX(-5px) 进行补偿。对于所有其他关键帧也是如此。

如果您想在 Y 维度上获得更快的动画，只需增加 Y 平移值而不触及 X 平移值。

.man-walk {
    width: 100px;
    height: 125px;
    position: absolute;
    top: 0;
    left: 50px;

    animation-name: man-walk;
    animation-duration: 0.45s;
    animation-iteration-count: infinite;
}

@keyframes man-walk {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(1.5deg);
    }

    50% {
        transform: rotate(0deg);
    }

    75% {
        transform: rotate(-1.5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.man-scale {
    width: 100px;
    height: 125px;

    animation-name: man-scale;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* define the animation */
@keyframes man-scale {
     0% {
        transform: translate(-5px, 30px) scale(1.1);
    }

    25% {
        transform: translate(-20px, 70px) scale(1.4);
    }

    50% {
        transform: translate(-35px, 120px) scale(1.7);
    }

    75% {
        transform: translate(-50px, 180px) scale(2.0);
    }

    100% {
        transform: translate(-65px, 250px) scale(2.3);
    } 
}

<div class="man-scale">
  <img class="man-walk" src="http://clipart-library.com/img/1184697.png">
</div>

可能有一些高级 CSS 技术可以自动计算偏移量。