Version: 1.1
hypetech.pl
Animacje odkrywania

Easing (funkja czasowa)

Określa easing (funkcję czasową) animacji, czyli sposób, w jaki zmienia się jej tempo w trakcie odtwarzania.

Domyślna funkcja czasowa: cubic-bezier(0.22, 1, 0.36, 1);

Easing decyduje o tym, czy animacja rozpoczyna się i kończy płynnie, przyspiesza, zwalnia, czy przebiega ze stałą prędkością. Dzięki odpowiedniemu doborowi easingów ruch elementów wygląda bardziej naturalnie i atrakcyjnie.

io-easing

Określa easing (funkcję czasową) animacji, czyli sposób, w jaki zmienia się jej tempo w trakcie odtwarzania.

Easing decyduje o tym, czy animacja rozpoczyna się i kończy płynnie, przyspiesza, zwalnia, czy przebiega ze stałą prędkością. Dzięki odpowiedniemu doborowi easingów ruch elementów wygląda bardziej naturalnie i atrakcyjnie.

Klasa Styl CSS
io-easing-linear 
transition-timing-function: linear;
io-easing-ease 
transition-timing-function: ease;
io-easing-ease-in 
transition-timing-function: ease-in;
io-easing-ease-out 
transition-timing-function: ease-out;
io-easing-ease-in-out 
transition-timing-function: ease-in-out;
io-easing-smooth 
transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
io-easing-soft 
transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
io-easing-swift 
transition-timing-function: cubic-bezier(0.34, 1, 0.64, 1);
io-easing-bounce 
transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
io-easing-bounce-lg 
transition-timing-function: cubic-bezier(0.18, 1.89, 0.32, 1.28);
io-easing-accelerate 
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
io-easing-decelerate 
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
io-easing-material 
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

Przykłady animacji

<div class="d-flex flex-column w-full o-hidden">
    <div class="h-screen flexsize-const d-flex items-center justify-center">Przewiń, aby zobaczyć animację: io-easing-linear</div>
    <div class="io io-60 io-repeat h-screen d-flex items-center justify-start pos-rel">
        <div class="pos-abs d-flex bgcolor-black/3 top-0 h-60p left-0 right-0">Threshold</div>
        <img class="io-anim io-slide-left-300 io-duration-slow io-easing-linear maxh-200px w-auto border--solid fit-cover fitpos-center" src="/images/baloons.jpg">
    </div>
    <div class="h-screen flexsize-const d-flex items-center justify-center">Przewiń, aby zobaczyć animację: io-easing-ease</div>
    <div class="io io-60 io-repeat h-screen d-flex items-center justify-start pos-rel">
        <div class="pos-abs d-flex bgcolor-black/3 top-0 h-60p left-0 right-0">Threshold</div>
        <img class="io-anim io-slide-left-300 io-duration-slow io-easing-ease maxh-200px w-auto border--solid fit-cover fitpos-center" src="/images/baloons.jpg">
    </div>
    <div class="h-screen flexsize-const d-flex items-center justify-center">Przewiń, aby zobaczyć animację: io-easing-ease-in</div>
    <div class="io io-60 io-repeat h-screen d-flex items-center justify-start pos-rel">
        <div class="pos-abs d-flex bgcolor-black/3 top-0 h-60p left-0 right-0">Threshold</div>
        <img class="io-anim io-slide-left-300 io-duration-slow io-easing-ease-in maxh-200px w-auto border--solid fit-cover fitpos-center" src="/images/baloons.jpg">
    </div>
    <div class="h-screen flexsize-const d-flex items-center justify-center">Przewiń, aby zobaczyć animację: io-easing-ease-out</div>
    <div class="io io-60 io-repeat h-screen d-flex items-center justify-start pos-rel">
        <div class="pos-abs d-flex bgcolor-black/3 top-0 h-60p left-0 right-0">Threshold</div>
        <img class="io-anim io-slide-left-300 io-duration-slow io-easing-ease-out maxh-200px w-auto border--solid fit-cover fitpos-center" src="/images/baloons.jpg">
    </div>
    <div class="h-screen flexsize-const d-flex items-center justify-center">Przewiń, aby zobaczyć animację: io-easing-ease-in-out</div>
    <div class="io io-60 io-repeat h-screen d-flex items-center justify-start pos-rel">
        <div class="pos-abs d-flex bgcolor-black/3 top-0 h-60p left-0 right-0">Threshold</div>
        <img class="io-anim io-slide-left-300 io-duration-slow io-easing-ease-in-out maxh-200px w-auto border--solid fit-cover fitpos-center" src="/images/baloons.jpg">
    </div>
    <div class="h-screen flexsize-const d-flex items-center justify-center">Przewiń, aby zobaczyć animację: io-easing-smooth</div>
    <div class="io io-60 io-repeat h-screen d-flex items-center justify-start pos-rel">
        <div class="pos-abs d-flex bgcolor-black/3 top-0 h-60p left-0 right-0">Threshold</div>
        <img class="io-anim io-slide-left-300 io-duration-slow io-easing-smooth maxh-200px w-auto border--solid fit-cover fitpos-center" src="/images/baloons.jpg">
    </div>
    <div class="h-screen flexsize-const d-flex items-center justify-center">Przewiń, aby zobaczyć animację: io-easing-soft</div>
    <div class="io io-60 io-repeat h-screen d-flex items-center justify-start pos-rel">
        <div class="pos-abs d-flex bgcolor-black/3 top-0 h-60p left-0 right-0">Threshold</div>
        <img class="io-anim io-slide-left-300 io-duration-slow io-easing-soft maxh-200px w-auto border--solid fit-cover fitpos-center" src="/images/baloons.jpg">
    </div>
    <div class="h-screen flexsize-const d-flex items-center justify-center">Przewiń, aby zobaczyć animację: io-easing-swift</div>
    <div class="io io-60 io-repeat h-screen d-flex items-center justify-start pos-rel">
        <div class="pos-abs d-flex bgcolor-black/3 top-0 h-60p left-0 right-0">Threshold</div>
        <img class="io-anim io-slide-left-300 io-duration-slow io-easing-swift maxh-200px w-auto border--solid fit-cover fitpos-center" src="/images/baloons.jpg">
    </div>
    <div class="h-screen flexsize-const d-flex items-center justify-center">Przewiń, aby zobaczyć animację: io-easing-bounce</div>
    <div class="io io-60 io-repeat h-screen d-flex items-center justify-start pos-rel">
        <div class="pos-abs d-flex bgcolor-black/3 top-0 h-60p left-0 right-0">Threshold</div>
        <img class="io-anim io-slide-left-300 io-duration-slow io-easing-bounce maxh-200px w-auto border--solid fit-cover fitpos-center" src="/images/baloons.jpg">
    </div>
    <div class="h-screen flexsize-const d-flex items-center justify-center">Przewiń, aby zobaczyć animację: io-easing-bounce-lg</div>
    <div class="io io-60 io-repeat h-screen d-flex items-center justify-start pos-rel">
        <div class="pos-abs d-flex bgcolor-black/3 top-0 h-60p left-0 right-0">Threshold</div>
        <img class="io-anim io-slide-left-300 io-duration-slow io-easing-bounce-lg maxh-200px w-auto border--solid fit-cover fitpos-center" src="/images/baloons.jpg">
    </div>
    <div class="h-screen flexsize-const d-flex items-center justify-center">Przewiń, aby zobaczyć animację: io-easing-accelerate</div>
    <div class="io io-60 io-repeat h-screen d-flex items-center justify-start pos-rel">
        <div class="pos-abs d-flex bgcolor-black/3 top-0 h-60p left-0 right-0">Threshold</div>
        <img class="io-anim io-slide-left-300 io-duration-slow io-easing-accelerate maxh-200px w-auto border--solid fit-cover fitpos-center" src="/images/baloons.jpg">
    </div>
    <div class="h-screen flexsize-const d-flex items-center justify-center">Przewiń, aby zobaczyć animację: io-easing-decelerate</div>
    <div class="io io-60 io-repeat h-screen d-flex items-center justify-start pos-rel">
        <div class="pos-abs d-flex bgcolor-black/3 top-0 h-60p left-0 right-0">Threshold</div>
        <img class="io-anim io-slide-left-300 io-duration-slow io-easing-decelerate maxh-200px w-auto border--solid fit-cover fitpos-center" src="/images/baloons.jpg">
    </div>
    <div class="h-screen flexsize-const d-flex items-center justify-center">Przewiń, aby zobaczyć animację: io-easing-material</div>
    <div class="io io-60 io-repeat h-screen d-flex items-center justify-start pos-rel">
        <div class="pos-abs d-flex bgcolor-black/3 top-0 h-60p left-0 right-0">Threshold</div>
        <img class="io-anim io-slide-left-300 io-duration-slow io-easing-material maxh-200px w-auto border--solid fit-cover fitpos-center" src="/images/baloons.jpg">
    </div>
</div>