I want to animate a couple, but something does not agree: the problem is with the translate and the scale, somehow they do not work together simultaneously.

HTML:

<img src="https://lh3.googleusercontent.com/-uU_C0PBe64k/VSd6800h1bI/AAAAAAAAFM8/hp-vH8wT3U4/w63-h57-no/steam.png" />

SCSS:

 @mixin steamLeft($speed, $delay) { -webkit-animation-name: steamLeft; animation-name: steamLeft; animation-duration: $speed; animation-delay: $delay; animation-iteration-count: infinite; animation-timing-function: linear; } img { position: absolute; top: 50px; left: 100px; width: 63px; height: 57px; @include steamLeft(2s,0); } @keyframes steamLeft { 0% { transform: translateX(0) scale(0); } 10% { transform: translateX(10px) scale(0.5); } 20% { transform: translateX(20px) scale(1); } }

JSFiddle Code

    1 answer 1

    I understand you need something like this ?

    You can simply shift the transform-origin .

    • oh, how I forgot about it, thank you very much, you saved me just - Aram Mkrtchyan