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 you have read our privacy policy.

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