Как применить новую анимацию преобразования, пока другая выполняется на том же элементе - PullRequest
Новая
       34

Как применить новую анимацию преобразования, пока другая выполняется на том же элементе

0 голосов
/ 01 августа 2020

У меня есть основная c фиксированная анимация для элемента, которая запускается, когда пользователь нажимает «пробел»: 

&.pop {
        animation: pop 1s ease-in 20ms 1 normal both;
}


@keyframes pop {
    0% {
        transform: rotate(0deg);
        transform-origin: 30px;
    }
    20% {
        transform: rotate(-30deg);
        transform-origin: 30px;
    }
    40% {
        transform: rotate(-10deg) translate(-2px, -20px);
        transform-origin: 30px;
    }
    60% {
        transform: rotate(0deg) translate(0, -40px);
        transform-origin: 30px;
    }
    80% {
        transform: rotate(3deg) translate(2px, -20px);
        transform-origin: 30px;
    }
    100% {
        transform:translate(0,0);
        transform-origin: 30px;
    }
}

Теперь я хочу добавить различные другие анимации преобразования при нажатии клавиши, которые будут запускаться одновременно с текущей анимацией, например: 

&.spin {
        animation: spin 500ms ease-out 20ms 1 forwards;
    }

@keyframes spin {
    0% {
        transform: rotateY(0);
    }
    100% {
        transform: rotateY(180deg);
    }
}

Итак, моя проблема в том, что когда я добавляю второй класс "spin", он проходит поверх моей первой "pop" анимации. как можно будет добавить его вместо наезда?

1 Ответ

1 голос
/ 01 августа 2020

, если я правильно понял ваш вопрос:
вы можете использовать несколько анимаций в преобразовании:
вот так: 

transform: rotate(90deg) translate(150px, -230px);

или вы можете использовать другой подход:
вы можете обернуть целевой элемент двумя внешними div и назначить анимацию для каждого div ..
точно так же 

<div class="apply_this_animation">
    <div class="apply_this_animation_also">
        <img src="https://via.placeholder.com/300x300" alt="#" />
    </div>
</div>

и используйте это в себе CSS вот так: 

<style>
.apply_this_animation {
    transform: rotate(90deg); 
}

.apply_this_animation_also {
    transform: translate(150px, -230px); 
}
</style>

Подробнее

...