CSS Translate and Scale on Y-Axis? - html

Question

I am taking an online course learning CSS and we are just covering CSS animations. I am trying to practice some of the things I learned (just basic transforms for now) by creating a small animation of a man walking towards the screen down a pathway.
Basically, I want to both translate and scale my image at the same time. I got this working fine, but now I also wanted to add some small rotation so that it looks like the man is slightly moving left and right. Here is my code in a jsfiddle, I don't know how to change the transform-origin so that the man is walking in a straight line on the Y-Axis, the scale makes him walk in a diagonal. I hope that makes sense...
The commented out part of the code includes the scale, as soon as that is added back, and the part without scale is commented out, it acts funny and I'm thinking this has to do with the origin?
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);
}
}
Thanks for the help!

Answer 1

Each time you scale the image along X and Y, the origin shifts in both dimensions by a specific offset. If you can compensate for that offset in the X dimension then a vertical animation could be achieved.
In this case in first keyframe the scale increased by 0.1 which is 100 * 0.1 = 10px now origin got offset by 5px in X dimension, compensating in terms of translateX(-5px). Similarly for all the other keyframes.
If you want a faster animation in the Y dimension just increase the Y translate values without touching the X translation values.
.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>
There might be some advanced CSS techniques to calculate the offset automatically.