Elastyczne łagodzenie w CSS3, najlepsze podejście - css3, animacje css

Chciałbym naśladować elastyczna funkcja łagodzenia w CSS3. CSS3 nie obsługuje tego natywnie, więc wymyśliłem własne klatki kluczowe i wygląda na to w porządku, ale nie do końca naturalne.

NIE chcę rozwiązania, które wymaga dodatkowych skryptów JavaScript. Wszystkie pozostałe posty na StackOverflow mają zaakceptowane rozwiązania JS.

Jaki jest najlepszy sposób na wdrożenie elastycznego łagodzenia w czystym CSS3?

Oto moja dotychczasowa praca, jeśli to pomaga komuś ...

https://jsfiddle.net/407rhhnL/1/

Animuję czerwone, zielone i niebieskie prostokątne pryzmaty izometryczne. Symulowałem wygładzanie ręczne ręcznie, kodując na stałe następujące klatki kluczowe CSS3:

@include keyframes(popup) {
0% {

}

20% {
transform: translateY(-50px);
}

40% {
transform: translateY(20px);
}

60% {
transform: translateY(-6px);
}

90% {
transform: translateY(0px);
}

100% {
transform: translateY(0px);
}
}

Nie szukam sugestii na temat poprawiania tego kodu, chciałbym wiedzieć, czy istnieje lepsze rozwiązanie niż kodowanie na stałe.

Odpowiedzi:

W zależności od ograniczeń przeglądarki (i jeśli używasz CSS3, powinieneś być w porządku, niezależnie od tego), możesz faktycznie zastosować łagodne przejścia za pomocą cubic-bezier () słowo kluczowe zamiast.

Przykładowa animacja wyglądałaby następująco:

transition-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53);
transition-duration: 2.9s;

Wpis na blogu Lei Verou całkiem dobrze to obejmuje.

Wiele wspaniałych przejść sześciennych beziera dostępnych tutaj:

http://easings.net/

Coś takiego może być tym, czego chcesz:

transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);