Y軸上のCSSの翻訳と拡大縮小？

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次元のオフセットを補正することができれば、垂直アニメーションを実現できます。この場合

は、最初のキーフレームに今原点100 * 0.1 = 10px 0.1増加スケールはtranslateX(-5px)の点で補償、X次元において5pxによってオフセット得ました。他のすべてのキーフレームについても同様です。

Y次元のアニメーションを高速化したい場合は、X変換値に触れることなくY変換値を増やすだけです。

.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テクニックがあるかもしれません。