Átmenetek css, órák, webreference
CSS Transitions zökkenőmentes átmenetet az egyik állapotból a másikba elem. Ez úgy működik, hogy az egyes tulajdonságok animált a kezdeti állapotban a végéig.
Megadhatjuk:
- átmenet-tulajdon. mely tulajdonságok animált;
- átmenetifém-időtartam. meddig az animáció;
- átmenet-időzítés-funkciót. intermedierként kiszámításra állapotban;
- átmenetifém-késleltetés. animáció indul egy idő után.
Beállíthatjuk minden CSS tulajdonság külön-külön, vagy használja a rövidített változat: átmenet. Ebben az esetben csak az átmeneti időtartamú kötelező.
Tartsuk szem előtt, hogy az átmenet sajátos vidanimatsii. ahol csak a kezdeti és a végső állapot.
Egy gyors példa
Transitions gyakran használják állapota: lebeg.
Ehelyett azonnali alkalmazása CSS szabályok lebeg háttér és a szöveg színe lassan változnak.
átmenetifém-időtartam
átmeneti ideig tartó az egyetlen stílus tulajdonságait létrehozásához szükséges az átmenet. Meg lehet telepíteni akár másodpercben (2s), vagy ezredmásodperc (100ms).
Ha azt szeretnénk, hogy győződjön meg az áttérés tartott fél másodpercig. írhat 0.5s vagy 500ms. Attól függően, hogy milyen gyorsan szeretne átmenet tartott, lehet, hogy könnyebb és / vagy írjon egy légtérben gyorsabban.
átmenet-tulajdonság
Csak a harmadik a CSS tulajdonságokat lehet animált. A Mozilla oldalon van egy teljes listát a tulajdonságok.
Alapértelmezésben a tulajdonságok az átmenet ingatlan összértéke. ez csak azt jelenti, hogy működnek-e majd az összes lehetséges tulajdonságait.
Akkor engedélyezze az animáció csak egy vagy több tulajdonságát.
border tulajdonság teljesen animált, és megkönnyíti, hogy tartsa be a lassú átmenet (2 másodperc).
átmenet-időzítés-funkció
Idő funkció határozza meg, hogyan kell kiszámítani az érték az egyes ingatlanok az átmenet során.
Az alapértelmezett átmenet egyenlő könnyedén. gyorsul és lassul, az a vég kezdete.
Ön dönthet úgy, hogy az átmenet következik be, állandó sebességgel. Idő funkció felgyorsítja vagy lelassítja az átmenetet.
A legegyszerűbb módja, hogy szemléltesse az idő függvényében is változhatnak pozicionálás tulajdonságait. mint a bal.
Tartsuk szem előtt, hogy minden átmenet ugyanennyi időt vesz igénybe (1 másodperc).
Ha azt szeretnénk, hogy egy ötlet, hogy más funkció működik időt, nézd meg ezt a puskát.
harmadfokú Bézier görbe
Ha ezeket a kész az idő függvényében nem megfelelő, akkor írhatunk segítségével Bezier görbék.
cubic-bezier.com site - egy egyszerű eszköz, a vizuális írásban saját görbék.
átmenetifém-késleltetés
átmenet-késleltetés meghatározza a késedelem t. e. meddig átmenet még várnia kell. Mielőtt elkezdené ténylegesen.
Mivel az átmenet-időtartam, akkor a második (k) vagy ezredmásodperc (ms).