Question

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

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

代码的注释部分包括比例，一旦加回，并且没有比例的部分被注释掉，它表现得很有趣并且我认为这与原点有关吗？ / p>

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平移值。

＆＃13;

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

＆＃13;

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

＆＃13;

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

CSS在Y轴上进行翻译和缩放？

1 个答案: