Animacje odkrywania

Czas trwania i opóźnienie

Klasy sterujące czasem trwania i opóźnieniem animacji.

Domyślne czasy dla animacji to:

opóźnienie: 0
czas trwania: 500ms (0,5s)

`io-delay`

Opóźnienie odtwarzania animacji

Klasa	Styl CSS
`io-delay-1s`	`transition-delay: 1s;`
`io-delay-2s`	`transition-delay: 2s;`
`io-delay-<time>`	`transition-delay: <time>ms;`

`io-duration`

Czas trwania animacji

Klasa	Styl CSS
`io-duration-fast`	`transition-duration: 250ms;`
`io-duration-normal`	`transition-duration: 450ms;`
`io-duration-slow`	`transition-duration: 700ms;`
`io-duration-very-slow`	`transition-duration: 1.5s;`
`io-duration-snail-slow`	`transition-duration: 2s;`
`io-duration-<time>`	`transition-duration: <time>ms;`

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-delay-200 / io-duration-fast</div>
    <div class="io io-60 io-repeat h-screen d-flex items-center justify-center 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 io-fade-in io-delay-200 io-duration-fast 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-delay-200 / io-duration-snail-slow</div>
    <div class="io io-60 io-repeat h-screen d-flex items-center justify-center 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 io-fade-in io-delay-200 io-duration-snail-slow 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ę dwóch elementów o róznych czasach</div>
    <div class="io io-60 io-repeat h-screen d-flex items-center justify-center pos-rel">
        <div class="pos-abs d-flex bgcolor-black/3 top-0 h-60p left-0 right-0">Threshold</div>
        <div class="w-full px-6 d-flex justify-between">
            <img class="io-anim io-slide-left io-fade-in io-delay-100 io-duration-fast maxh-200px w-auto border--solid fit-cover fitpos-center aspectratio-1" src="/images/baloons.jpg">
            <img class="io-anim io-slide-right io-fade-in io-delay-500 io-duration-snail-slow maxh-200px w-auto border--solid fit-cover fitpos-center aspectratio-1" src="/images/mountains.jpg">
        </div>
    </div>
</div>