CSS: не облегчайте каждый шаг в анимации - PullRequest
Новая
       9

CSS: не облегчайте каждый шаг в анимации

0 голосов
/ 17 сентября 2018

Мне было интересно, есть ли способ применить смягчение CSS в анимации к полной анимации, а не для каждого шага.

Моя проблема: 

.animation {
    animation: crazyAnimation 1s ease;
}

Это облегчит каждый шаг из этой анимации: 

@keyframes crazyAnimation {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}

То, чего я пытался достичь, это плавный отскок от 0 -> до 10px -> обратно до 0.

Функция замедления анимации приведет к замедлению анимации с 0 -> ускорение -> замедление до -10px -> ускорение -> замедление до 0

Я пытался добиться того, чтобы анимация начиналась медленно -> ускоряться -> и заканчивалась медленно при возврате к 10px снова.

Я исправил это сейчас, используя это: 

@keyframes crazyAnimation {
    0% {
        transform: translateY(0);
        animation-timing-function: ease-in;
    }
    50% {
        transform: translateY(-10px);
        animation-timing-function: ease-out;
    }
    100% {
        transform: translateY(0);
    }
}

Это работает только для трехэтапной анимации.

Надеюсь, я смог правильно описать проблему, есть идеи как это исправить?

Я ценю всю помощь.

...