Animáció CSS példák
Létrehozni az animáció nem korlátozódik az egyedi programok, hanem a lehetőségek kaszkád CSS3 asztalra. Építve a tudást és a képzelet, hogy dolgozzon részletesen hatásainak CSS animációk adalékanyag hozzáadása nélkül. Különösen CSS animáció - ez egy jó módja annak, hogy lenyűgözni a felhasználók a megfelelő helyre. A CSS-animációk lehet mozogni szinte minden szöveget, képet, egyedi formák, és minden mást, ami eszébe jut.
Hogy támogassa az animáció minden böngészőket használják, nem szabványos tulajdonság előtagot. Ezt jelzi az a sor elején mindegyik böngészőben külön.
Internet Explorer 10 támogatja az előtag nélkül. Opera böngésző felismeri -webkit előtag o- így az értéke nem lehet használni.
A start frame animáció.
Az ingatlan @keyframes létrehozza a kezdő képkocka az animáció, hogy szeretne kapcsolni egy adott választó. Ezután adjon meg legalább két lépésből áll:
- a név az animáció
- az animáció
Megjegyzés: Ha nem adja meg az időtartamát az animáció, akkor nem történik intézkedés fog bekövetkezni, mert az alapértelmezett nulla.
Hogyan működik a CSS animációt?
Animáció lehetővé teszi, hogy váltani egyik stílus a másikra, miközben simán változik őket. Meg lehet változtatni sok elemet tartalmaz, de a legfontosabb dolog - többször, mint ahányszor szükséges. Átmeneti animáció százalékában 0% és 100%, vagy kulcsszavakat «re» a «a».
Példák animációk a logó.
Talán ez az alkalmazás fog találkozni ritkán web design, kivéve, hogy kivéve a promo - hengerek. De inkább érdekes lesz, hogy a szem és képes inspirálni beduyuschee logoentwürfe.







