html - CSS 在 Y 轴上平移和缩放？

Question

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

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

代码中被注释掉的部分包括刻度，一旦把它加回来，没有刻度的部分被注释掉，这很有趣，我认为这与起源有关？

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现在原点被 5px 抵消了在 X 维度上，根据 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 技术可以自动计算偏移量。