0

Я хочу делать анимацию пара, но что-то не сходится: проблема с translate и scale-ом, как-то они не работают вместе однвременно.

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

1 ответ 1

1

Как я понял, тебе нужно что-то вроде этого?

Можно просто сместить transform-origin.

1
  • ооо как я забыл про это спасибо большое вы мне спасли просто 10 апр 2015 в 8:43

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.