Jak vytvořit animaci v CSS. Devět jednoduchých příkladů CSS3 Animace

Pro vytvoření animace, CSS přechodové a animační vlastnosti jsou používány k jejich zvážení podrobně s příklady.

Animační prvky nejen udělat design pohodlnější a elegantní, ale také uživatelé volání pozitivní emoce, které doslova přitahují na místo.

Jedná se o zakázkové ukazatele.

Pokud jde o vývoj webu - animace oživuje prvky obsahu s nástroji CSS, bez přilákání JavaScriptu, který je dobrý pro mobilní zařízení.

Musí varovat před přijetím pro animaci prvků, musíte se seznámit založený HTML. a CSS.

Hlavními komponenty animace CSS jsou vlastnosti přechodu a animace a pravidlo @keyframes.

Zvážit je v pořádku.

přechod.

Přechod vlastností se používá k vytvoření jednoduché animaceTo znamená, že vytváří účinek přechodu mezi oběma stavy prvku.

přechod zase lze rozdělit na 4 komponenty, z nichž každý ovlivňuje určitý aspekt přechodového účinku.

1. Přechod-vlastnost - Definuje vlastnost, která bude animována. Pokud je například položka posunuta, pak to bude vlastnosti horní, doleva, okraje atd., Změňte velikost, pak šířku nebo výšku, změňte barvu - barvu nebo pozadí.

Napsané takto:

přechodový majetek: vlevo;

2. Trvání přechodu - doba trvání přechodového efektu. V sekundách.

trvání přechodu: 3s;

3. Funkce přechodu-časování - rychlost přechodového efektu. Vezme následující hodnoty:

snadná animace pomalu začíná, pak se zrychlila a zpomalila až do konce;

snadná in - pomalu začíná, a koncem urychluje;

uvolnění - rychle začíná a konec zpomaluje;

snadnost-in-out - zpomalte na začátku a na konci;

lineární - konstantní rychlost;

cubic-Bezier - Nastaví všechny hodnoty v numerickém výrazu. Snadnost je například zaznamenána následujícím způsobem: Cubic-Bezier (0.25.0.1,0.25,1).

4. Přechodné zpoždění - zpoždění začátku animace. V sekundách. Například animace může začít po určité době po načítání stránky.

V Zkrácené verzi je položka animace takto - v vlastnost Přechod jsou všechny výše uvedené hodnoty nastaveny v pořádku prostřednictvím prostoru.

pŘECHOD: levý 3S lehkost (nebo Cubic-Bezier (0,25,0.1,0.25,1) 3S;

Příklad, ve kterém se prvek pohybuje, když se podíváte kurzor.





přechod.





Результат:

animation и @keyframes

Свойство animation и правило @keyframes применяются для создания анимации любой сложности.

Свойство animation задаёт параметры действия для анимации (длительность анимации, повторение, направление, тип движения, шаги), а в блоке @keyframes задаётся сама анимация по шагам (изменения вида и положения)

Свойство animation включает в себя восемь составляющих:

1. animation-name — имя анимации. задаётся произвольно. Необходимо для того, чтоб определить анимацию в блоке @keyframes , так как для одного элемента может быть задано несколько анимаций.

2. animation-duration — длительность анимации, задаётся в секундах (s) или миллисекундах (ms).

3. animation-timing-function — определяет тип анимации и принимает следующие значения:

ease — скольжение;

linear — ровное движение;

ease-out — ускорение в начале;

ease-in — ускорение в конце;

ease-in-out — более плавное скольжение, чем ease

cubic-bezier — задаёт числовые параметры позволяющие реализовать более сложные типы анимации. Инструмент для подбора числовых параметров — cubic-bezier.com

step-start и step-end — задаёт пошаговую анимацию (счётчик)

steps — задаёт количество шагов за которые будет выполнена анимация (секундомер — steps(60) animation-duration -60s)

4. animation-iteration-count — задаёт число повторений анимации. Принимает значения:

любое число — сколько раз повторяется анимация;

infinite — бесконечное повторение;

5. Animation-direction — задаёт направление движения. Принимает значения:

normal — движение слева на право;

reverse — движение справа на лево;

alternate — полный цикл туда и обратно;

alternate-reverse — полный цикл, но начинается и заканчивается с конца;

6. animation-play-state — задаёт остановку анимации. Принимает значения:

running — анимация проходит нормально (по умолчанию);

paused — анимация замирает на первом шаге;

7. animation-delay — задаёт задержку анимации перед началом воспроизведения. Определяется в секундах (s) и миллисекундах (ms)

8. animation-fill-mode — позволяет проигрывать анимацию вне указанного времени воспроизведения. Принимает значения:

none — анимация в работает только в заданном времени воспроизведения, потом возвращается на место.

forwards — анимация продолжается после окончания времени воспроизведения;

backwards — анимация начинается до начала воспроизведения;

both — анимация работает и до начала и после окончания времени воспроизведения;

Некоторые из этих свойств поначалу могут показаться абсурдными, но при создании сложных анимаций они позволяют реализовать смелые творческие решения.

Все свойства можно записать в сокращённом виде, указав в свойстве animation только их значения. Например:

Правило @keyframes — второй шаг в создании сложной анимации.

Внутри этого правила создается поэтапное воспроизведение преобразований происходящих с элементом.

На практике это выглядит следующим образом: в таблице стилей создаётся селектор @keyframes внутрь которого помещаются селекторы последовательно определяющие состояние элемента.

Например, возьмём элемент

, зададим ему форму квадрата, фоновый цвет, и сделаем чтобы этот цвет менялся от полной прозрачности, к полной непрозрачности.

div {
width : 200px ;
height : 200px ;
background-color : #FF3D00 ;
animation : nev 5s infinite alternate ;

@keyframes nev {
from { /* От */
opacity : 0 ; /* полная прозрачность */
}
to { /* До */
opacity : 1 ; /* полная непрозрачность */
}
}

Селекторами from и to задаётся преобразование от одного состояния элемента до другого.

Но гораздо удобнее задавать изменение состояния в процентах. Тогда число селекторов можно увеличить, и тем самым разбить процесс на большее число этапов.

Каждому этапу при этом можно задать что-то своё. Например продолжительность, границу, размер и т.п.

@keyframes nev {
0% {
opacity : 0 ;
border-radius : 50% ;
}

50% {
opacity : 0.5;
border-radius : 30% ;
}

100% {
opacity : 1 ;
border-radius : 0 ;
}
}

Пример появления и исчезновения квадрата:





animation





Результат:

Надеюсь основы создания анимации понятны. Теперь, когда Вам известны свойства, значения и инструменты, открывайте Notepad++ и творите от простого к сложному.

В следующей статье «CSS перемещение, вращение, 3D» подробно разберём свойство transform, очень часто применяющееся в анимациях.

Последнее обновление: 06.11.2016

Анимация предоставляет большие возможности за изменением стиля элемента. При переходе у нас есть набор свойств с начальными значениями, которые имеет элемент до начала перехода, и конечными значениями, которые устанавливают после завершения перехода. Тогда как при анимации мы можем иметь не только два набора значений - начальные и конечные, но и множество промежуточных наборов значений.

Анимация опирается на последовательню смену ключевых кадров (keyframes). Каждый ключевой кадр определяет один набор значений для анимируемых свойств. И последовательная смена таких ключевых кадров фактически будет представлять анимацию.

По сути переходы применяют ту же модель - так же неявно определяются два ключевых кадра - начальный и конечный, а сам переход представляет переход от начального к конечному ключевому кадру. Единственное отличие анимации в данном случае состоит в том, что для анимации можно определить множество промежуточных ключевых кадров.

В целом объявление ключевого кадра в CSS3 имеет следующую форму:

@keyframes название_анимации { from { /* начальные значения свойств CSS */ } to { /* конечные значения свойств CSS */ } }

После ключевого слова @keyframes идет имя анимации. Затем в фигурных скобках определяются как минимум два ключевых кадра. Блок после ключевого слова from объявляется начальный ключевой кадр, а после клюевого слова to в блоке определяется конечный ключевой кадр. Внутри каждого ключевого кадра определяется одно или несколько свойств CSS, подобно тому, как создается обычный стиль.

Например, определим анимацю для фонового цвета элемента:

Анимация в CSS3

V tomto případě se animace nazývá backgroundColoraranimation. Animace může mít libovolný název.

Tato animace poskytuje přechod z červeném pozadí na modrou. A po dokončení animace bude instalována barva, která je definována prvkem DIV.

Chcete-li připojit animaci k prvku, vlastnost animace-name se používá ve stylu. Hodnota této vlastnosti je název použité animace.

Také pomocí vlastnosti animace trvání, musíte určit čas animace v sekundách nebo milisekundách. V tomto případě je doba animace 2 sekundy.

S touto definicí začne animace okamžitě po načtení stránky. Můžete však také spustit animaci pomocí akce uživatele. Například definováním stylu pro pseudoklass: Hover, můžete definovat spuštění animace, když se vydáte na ukazatel myši na položku:

@Keyframes backgroundColorAranimation (od (barvy pozadí (barva pozadí: modrá;))) div (šířka: 100px; výška: 100px; okraj: 40px 30px; hranice: 1px solid # 333; background-color: # ccc;) div: vznášet se (animace- Jméno: BackgroundColoranimation; Doba trvání animace: 2s;)

Mnoho klíčových personálů

Jak již bylo uvedeno výše, animace jiná než dvě standardní klíčové rámečky vám umožní používat mnoho meziproduktů. Pro určení mezilehlého rámce se použije procentuální hodnota animace, ve které by měl být tento rámeček použit:

@Keyframes BackgroundColoranimation (od (barvy pozadí (barva pozadí: červená;) 25% (barva pozadí: žlutá;) 50% (barva pozadí: zelená;) 75% (barva pozadí: modrá;) až (barva pozadí: fialová) ;)))

V tomto případě začíná animace červenou. Po 25% času animace se barva změní na žlutou, dalších 25% - na zelené a tak dále.

Můžete také animovat několik vlastností v jednom rámečku klíčů:

@Keyframes backgroundColoranimation (od (barvy pozadí (barvy pozadí: červená; opacity: 0,2;) k (barvy pozadí: modrá; Opacity: 0,9;))

Můžete také definovat několik samostatných animací, ale aplikovat je dohromady:

@Keyframes BackgroundColorAranimation (od (barvy pozadí (barvy pozadí (barvy pozadí))) @Keyframes opacityImace (z (opacity: 0,2;) až (opacita: 0,9;)) div (šířka: 100px; výška: 100px; marže: 40px 30px; hranice: 1px solidní # 333; barva pozadí: #ccc; animace-name: backgroundColoraranimation, opacityImace; doba trvání animace: 2s, 3s;)

Jako hodnota vlastnosti animace-name, animace jsou uvedeny prostřednictvím čárky a také prostřednictvím čárky, vlastnost trvání animace je nastavena na čas těchto animací. Název animace a jeho čas je mapován pozicí, to znamená, že animace opacitace bude trvat 3 sekundy.

Dokončení animace

Obecně platí, že po dokončení časového intervalu zadaného na vlastnosti animace trvání, animace je dokončena. S pomocí dalších nemovitostí však můžeme toto chování přepsat.

Takže vlastnost Count Animation-iteration-Count určuje, kolikrát se animace opakuje. Například 3 opakování animace v řadě:

Animace-iterace-počet: 3;

Pokud je nutné, aby animace spustila nekonečný počet krát, pak je tato vlastnost přiřazena hodnotu nekonečného:

Animace-iterace-počet: nekonečný;

Při opakování animace začne znovu od počátečního klíčového snímku. Ale používání vlastnosti Směr animace: Alternativní; Opačný směr animace při opakování. To je, začne od konečného klíčového snímku, a pak bude přechod na počáteční rámec:

Animace-Jméno: BackgroundColoraranimation, OpacityImace; Doba trvání animace: 2S, 2S; Animace-iterace-počet: 3; Směr animace: alternativní;

Když je animace dokončena, prohlížeč nastaví styl pro animovaný prvek, který by byl před použitím animace. Ale režim animace-výplň: vlastnost vpřed vám umožní navázat přesně ten, který byl v posledním snímku:

Animace-Jméno: BackgroundColoraranimation; Doba trvání animace: 2s; Animace-iterace-počet: 3; Směr animace: Alternativní; Animace-Fill-Režim: dopředu;

Zpoždění animace

Použití vlastnosti zpoždění animace, můžete definovat čas zpoždění animace:

Animace-Jméno: BackgroundColoraranimation; Doba trvání animace: 5s; Zpoždění animace: 1s; / * Zpoždění v 1 sekundu * /

Pole hladké animace

Stejně jako u přechody, všechny stejné hladké funkce lze aplikovat na animaci:

    lineární: lineární hladká funkce, změna vlastnosti dochází rovnoměrně v čase

    snadné funkce: Hladká funkce, ve které je animace urychlena na střed a zpomaluje až do konce, což zajišťuje přirozenější změnu.

    snadná v: Funkce hladkosti, při které dochází pouze zrychlení

    snadné out: Hladká funkce, na které se na začátku vyskytuje pouze zrychlení

    snadná funkce: Hladká funkce, ve které je animace urychlena do středu a zpomaluje až do konce, což poskytuje přirozenější změnu.

    cubic-Bezier: Pro animaci je aplikována kubická funkce Beziera

Chcete-li nastavit hladkou funkci, použije se vlastnost Funkce pro časování animace:

@Keyframes backgroundColoranimation (z (barvy pozadí (barva pozadí: modrá;))) div (šířka: 100px; výška: 100px; marže: 40px 30px; ohraničení: 1px solidní # 333; animace-name: backgroundColoraranimation; animace-trvání: 3S; animace- Funkce časování: Snadno-in-out;)

Vlastnost animace.

Vlastnost animace je zkrácený způsob, jak určit výše uvedené vlastnosti:

Animace: Animace-Name-Name Animace-Délka trvání animace-časování-funkce animace-iteration-count animation-Směr animace-zpoždění animace-výplň-režim

První dva parametry, které poskytují jméno a čas animace, jsou povinné. Zbývající hodnoty nejsou vyžadovány.

Vezměte následující soubor vlastností:

Animace-Jméno: BackgroundColoraranimation; Doba trvání animace: 5s; Funkce na časování animace: Snadné připojení; Animace-iterace-počet: 3; Směr animace: Alternativní; Zpoždění animace: 1s; Animace-Fill-Režim: dopředu;

Tato souprava bude ekvivalentní následující definici animace:

Animace: BackgroundColoraranimation 5s Snadno-in-out 3 Alternativní 1S vpřed;

Vytvoření banneru s animací

Jako příklad s animací vytvořte nejjednodušší animovaný banner:

Html banner.

Zde se spustí tři animace. Animace "Banner" změní barvu pozadí banneru a zobrazuje animační text1 a text2 a skryjete text pomocí nastavení průhlednosti. Když je první text viditelný, druhá není viditelná a naopak. Dostáváme tedy animaci textu v banneru.

CSS3 Animace je široce používána. Je na čase zjistit i nejvíce začátečníků stavitelů stránek. Co je animace CSS a jak jej vytvořit. Možná si myslíte, že animace CSS3 je, aby se bloky pohybovaly a vypadá to jako karikatura. Animace CSS však není jen pohybem položky z jednoho bodu do druhého, a to je stále zkreslení a jiná transformace. Aby bylo jasné i pro začátečníky - jsem namaloval všechno v krocích.

1. Základní vlastnosti CSS3 Animace

Malý teoretický blok, od kterého pochopíte, které CSS3 nemovitosti jsou zodpovědné za animaci, stejně jako jaké hodnoty mohou vzít.

  • jméno animace. - Jedinečný název animace (klíčové rámečky, mluvit o nich přímo pod).
  • doba trvání animace. - Doba trvání animace v sekundách.
  • funkce časování animace - Změny rychlosti animace. Na první pohled je velmi nepochopitelný. Je vždy snazší ukázat na příkladu a uvidíte je níže. Může provést následující hodnoty: lineární | Snadnost | Snadnost Usnadnění | Cubic-Bezier (n, n, n, n).
  • zpoždění animace. - Zpoždění v sekundách před začátkem animace.
  • animace-iterace-počet - Počet opakování animací. Je nastaven buď jen číslo, nebo můžete určit nekonečné a animace bude prováděna nekonečně.

Zde jsou pouze základní vlastnosti, které jsou více než dostačující k vytvoření jejich první animace na CSS3.

Poslední věc, kterou potřebujeme vědět a pochopit teorii je, jak vytvořit klíčový personál. Je také snadné to provést pomocí pravidel @KeyFrames, ve kterém jsou uvedeny klíčové pracovníky. Syntaxe tohoto pravidla je následující:

Výše jsme se zeptali první a poslední snímek. Všechny mezilehlé státy se automaticky vypočítají!

2. Skutečný příklad animace CSS3

Teorie jako obvykle je nudné a ne vždy jasné. Je mnohem snazší vidět všechno skutečný příkladA nejlepší ze všeho, udělejte to sami na stránce testu HTML.

Při učení programovacího jazyka je obvykle napsán program "Ahoj, World!", Který lze pochopit, která syntaxe tohoto jazyka a některých dalších základních věcí. Studujeme však programovací jazyk, ale popis jazyka externí pohled Dokument. Proto budeme mít své vlastní "Ahoj, World!".

Zde je to, co budeme dělat například: Dejme nějaký blok

Bude původně šířkou 800px a za 5 sekund se sníží na 100px.

Zdá se, že je vše jasné - stačí stisknout blok

A to je vše! Podívejme se, jak to vypadá ve skutečnosti.

První značení HTML. Je to velmi jednoduché, protože pracujeme pouze s jedním prvkem na stránce.

1 <dIV Class \u003d "Tosmallwidth"\u003e

Ale co je v souboru stylu:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 .tosmallwidth (marže: 20px auto; / * Externí odsazení shora a zespodu 20px a zarovnání uprostřed * / Pozadí: červená; / * Červené pozadí pro blok * / Výška: 100px; / * Výška bloku 100px * / šířka: 800px; / * počáteční šířka 800px * / -Webkit-animace-name: animwidthsInithere; -WebKit-animace-trvání: 5s; / * Propix majetek pro chromové prohlížeče, Safari, opera * / Jméno animace: animwidthsInithere; / * Uveďte název rámečků klíčů (níže) * / Doba trvání animace: 5s; / * Nastavte dobu trvání animace * / } / * Klíčový personál s předponou pro prohlížeče Chrome, Safari, Opera * / @ -Webkit-keyframes animwidthsite ( Z (šířka: 800px;) do (šířka: 100px;)) @Keyframes animwidthsiSeithere ( Z (šířka: 800px;) / * první klíčový snímek, kde je šířka bloku 800px * / (Šířka: 100px;) / * Poslední rámeček klíč, kde šířka blok 100px * / }

Jak vidíte, zobrazili jsme pouze první a poslední klíčový snímek a automaticky všechny mezilehlé "postavené".

Zde je vaše první animace CSS3. Zajistit získané znalosti - vytvořit Dokument HTML. a CSS soubor a vložte tam (a lépe vytisknout kód z příkladu. Pak budete určitě rozumět všechno. Poté zkuste udělat totéž s výškou bloku (měla by se snížit výšku) pro zajištění materiálu.

3. Příklady animace CSS3 komplexnější

Naděřili jste, jak snadné je vytvořit animaci CSS3. Pokud jste se snažili udělat s vlastními rukama, už jsem pochopil celý proces a nyní se chcete naučit, jak vytvořit složitější a krásnou animaci. A to je opravdu možné vytvořit. Níže jsou uvedeny 3 lekce, kde je také vytvořena animace jako v příkladu výše.

CSS3 Animace dává stránky dynamické. To oživuje webovou stránku, zlepšení interakce uživatele. Na rozdíl od přechodů CSS3 je vytvoření animace založeno na klíčových rámcích, které vám umožní automaticky přehrávat a opakovat efekty přes předem stanovený čas, stejně jako zastavit animaci uvnitř cyklu.

CSS3 Animace lze aplikovat na téměř všechny HTML prvky, stejně jako pro pseudo-prvky: před a: po. Seznam animovaných vlastností se zobrazí na stránce. Při vytváření animace by nemělo zapomenout možné problémy S výkonem, protože změna některých vlastností vyžaduje mnoho zdrojů.

Úvod do animace CSS

Podpůrné prohlížeče

TJ: 10.0
Firefox: 16,0, 5,0 -Moz-
Chrome: 43,0, 4.0 -WebKit-
Safari: 4.0 -WebKit-
Opera: 12.1, 12,0-
iOS SAFARI: 9, 7.1 -WebKit-
Opera Mini: —
Prohlížeč Android: 44, 4.1 -WebKit
Chrome pro Android: 44

1. Klíčové pracovníky

Klíčovým personálem se používají k označení hodnot vlastností animace v různých turných animaci. Klíčové pracovníci určují chování jednoho animačního cyklu; Animace lze opakovat nula nebo vícekrát.

Klíčové pracovníky jsou označeny @Keyframes pravidlem následujícím způsobem:

@KeyFrames Jméno animace (Seznam pravidel)

Vytvoření animace začíná instalací klíčová osoba Pravidla @KeyFrames. Rámy určují, které vlastnosti v jakém kroku bude animován. Každý snímek může obsahovat jeden nebo více bloků reklamy z jednoho nebo více párů vlastností a hodnot. Pravidlo @KeyFrames obsahuje název animace prvku, který připojuje pravidlo a jednotku deklarace prvku.

@KeyFrames Shadow (od (textový stín: 0 3px černá;) 50% (textový stín: 0 30px černá;) do (text-stín: 0 0 3px černá;))

Klíčovým personálem jsou vytvořeny pomocí klíčových slov a na klíčová slova (ekvivalentní hodnotám 0% a 100%) nebo s procentním bodem, které lze nastavit co nejvíce. Můžete také kombinovat klíčová slova a procentní body. Pokud mají rámce stejné vlastnosti a hodnoty, mohou být kombinovány do jednoho oznámení:

@Keyframes tah (od, do (top: 0; vlevo: 0;) 25%, 75% (nahoře: 100%;) 50% (nahoře: 50%;))

Pokud 0% nebo 100% rámců není zadáno, prohlížeč Uživatel je vytvoří pomocí vypočítaných (zpočátku zadaných) hodnot animovaného vlastnosti.

Pokud je několik pravidel @keyframes definováno se stejným názvem, bude fungovat poslední v pořadí dokumentu a všechny předchozí jsou ignorovány.

Po vyhlášení pravidla @KeyFrames můžeme na něj odkazovat na vlastnost animace:

H1 (velikost písma: 3.5EM; barva: DarkMagenta; animace: stín 2s nekonečný snadnost-in-out;)

Nedoporučuje se animovat non-číselné hodnoty (s vzácnou výjimkou), protože výsledek v prohlížeči může být nepředvídatelný. Neměli byste vytvářet klíčové rámečky pro hodnoty vlastností, které nemají průměrný bod, například pro hodnoty vlastnosti barvy: růžová a barva: #ffffffff, šířka: auto a šířka: 100px nebo hranice Poloměr: 0 a okruh pohraničí: 50% (v tomto případě bude správně indikovat poloměr hranice: 0%).

1.1. Dočasná funkce pro rámečky klíčů

Pravidlo stylu klíčového snímku může také deklarovat dočasnou funkci, která má být použita při přesunu animace na další rámeček klíče.

Příklad

@Keyframes odrazit (od (top (top: 100px; funkce animace-časování: snadné-out;) 25% (nahoře: 50px; funkce časování animace: snadnost-in;) 50% (nahoru: 100px; funkce časování animace : Snadnojdoucí;) 75% (nahoře: 75px; funkce animace-časování: snadnost-in;) k (nahoře: 100px;))

Five klíčových rámců je určeno pro animaci s názvem "Bounce". Mezi prvním a druhým klíčovým snímkem (tj. Mezi 0% a 25%) používá funkci zpomalení. Mezi druhým a třetím klíčovým scén (tj. Mezi 25% a 50%) využívá funkci hladkého zrychlení. Atd. Prvek se bude pohybovat nahoru na stránku 50px, zpomaluje se, protože dosáhne nejvyššího bodu, a pak zrychluje, když klesne na 100px. Druhá polovina animace se chová podobně, ale přesune pouze prvek na stránku 25px.

Časová funkce zadaná v rámečku klíče na nebo 100% je ignorována.

2. Název animace: vlastnost animace-name

Nemovitost názvu animace definuje seznam animací aplikovaných na prvek. Každé jméno se používá k výběru klíčového snímku v pravidle, které poskytuje vlastnosti animace. Pokud název neodpovídá žádnému klíčovému personálu v pravidle, neexistují žádné vlastnosti pro animaci, neexistuje žádný název animace, animace nebude provedena.

Pokud se více animací pokouší změnit stejnou vlastnost, animace je dokončena, jména nejblíže ke konci seznamu jmen.

Název animace je citlivé na registru, není povoleno žádné klíčové slovo žádné použití. Doporučuje se použít název odrážející podstatu animace, zatímco můžete použít jednu nebo více slov uvedených přes pomlčku - nebo dolní znak podtržítka _.

Nemovitost není zděděna.

Syntax

Jméno animace: žádný; Jméno animace: test-01; Název animace: -Sliding; Jméno animace: pohybující se vertikálně; Jméno animace: test2; Jméno animace: test3, pohyb4; Název animace: počáteční; Jméno animace: dědic;

3. Doba trvání animace: vlastnost anace trvání

Vlastnost animace trvání určuje dobu trvání jednoho animačního cyklu. Určete v sekundách nebo milisekundách MS. Pokud je pro položku zadáno více než jedna animace, můžete pro každou čárku nastavit různé časy, které jsou uvedeny přes čárku.

Nemovitost není zděděna.

Syntax

Doba trvání animace: .5s; Doba trvání animace: 200ms; Doba trvání animace: 2s, 10s; Doba trvání animace: 15s, 30s, 200ms;

4. Dočasná funkce: vlastnost Funkce na časování

Vlastnost Funkce na časování animace popisuje, jak se bude rozvíjet animace mezi každým párem klíčových rámců. Během zpoždění animace se neplatí dočasné funkce.

Nemovitost není zděděna.

funkce časování animace
Hodnoty:
lineární Lineární funkce, animace se vyskytuje rovnoměrně po celou dobu, bez váhání rychlosti.
funkce Beziers.
Ulehčit. Výchozí funkce, animace začíná pomalu, rychle urychluje a zpomaluje na konci. Odpovídá Cubic-Bezier (0,25.0.1,0.25,1).
Snadnost Animace začíná pomalu, a pak se na konci hladce urychluje. Odpovídá kubic-Bezier (0,42,0,1,1).
Uvolnění. Animace začíná rychle a hladce zpomaluje na konci. Odpovídá Cubic-Bezier (0.0.0.58.1).
Lehkomyslný Animace pomalu začíná a pomalu končí. Odpovídá kubic-Bezier (0,42,0,0,58,1).
Cubic-Bezier (X1, Y1, X2, Y2) Umožňuje ručně nastavit hodnoty od 0 do 1. Můžete vytvořit jakoukoliv trajektorii rychlosti změny animace.
funkce krok za krokem
Krok-start. Určuje krok za krokem animaci, porušení animace do segmentů, se na začátku každého kroku vyskytují změny. Vypočítá se v krocích (1, start).
Krok-konec. Krok za krokem animace, změny dochází na konci každého kroku. Vypočítá se v krocích (1, konec).
Kroky (počet kroků, pozice kroku) Krok časová funkce, která trvá dva parametry. První parametr označuje počet intervalů ve funkci. To by mělo být pozitivní celé číslo větší než 0, pokud druhý parametr není skok-none - v tomto případě by mělo být kladné celé číslo více než 1. Druhý parametr, který je volitelný, označuje pozici kroku - v okamžiku, kdy animace začíná jedním z následujících hodnot:
  • jOBE-START - První krok nastane, když 0
  • skočko - poslední krok nastane při hodnotě 1
  • skočko - žádné kroky se vyskytují v rozsahu (0, 1)
  • jump-oba - první krok dochází při hodnotě 0, druhá - na hodnotě 1
  • start - Chová se jako Jump-Start
  • konec - chová se jako skok

S počáteční hodnotou začíná animace na začátku každého kroku, s hodnotou konce - na konci každého kroku se zpožděním. Zpoždění se vypočítá v důsledku rozdělení doby animace podle počtu kroků. Pokud není zadán druhý parametr, výchozí hodnota končí.
počáteční
zdědit.

Syntax

Funkce animace-časování: lehkost; Funkce animace-časování: snadnost-in; Funkce na časování animace: Uvolnění; Funkce na časování animace: Snadné připojení; Funkce animace-časování: lineární; Funkce animace-časování: krok-start; Funkce na časování animace: Krok-konec; Funkce na časování animace: Cubic-Bezier (0,1, 0,7, 1,0, 0,1); Funkce animace-časování: kroky (4, konec); Funkce na časování animace: snadnost, krok-start, Cubic-Bezier (0,1, 0,7, 1,0, 0,1); Funkce časování animace: počáteční; Funkce na časování animace: Dědí;

Po kroku krok za krokem můžete vytvářet zajímavé efekty, například tisk textu nebo indikátor stahování.

5. Opakujte animace: nemovitost anation-iterace

Vlastnost animace-iteration-počet ukazuje, kolikrát se hraje animační cyklus. Počáteční význam 1 znamená, že animace bude přehrávána od začátku ukončit jednou. Tato vlastnost je často používána ve spojení s alternativní hodnotou vlastností směru animace, což způsobí, že animace přehrávání přehrávání v opačném pořadí v alternativních cyklech.

Nemovitost není zděděna.

Syntax

Animace-iterace-počet: nekonečný; Animace-iterace-počet: 3; Animace-iterace-počet: 2.5; Animace-iterace-počet: 2, 0, nekonečný;

6. Směr animace: vlastnost animace

Nemovitost směru animace určuje, zda by animace měla být přehrána v opačném pořadí v některých nebo ve všech cyklech. Když je animace reprodukována v opačném pořadí, dočasné funkce také mění v místech. Například při hraní v opačném pořadí bude funkce snadnost se chová jako usmírněná.

Nemovitost není zděděna.

směr animace.
Hodnoty:
Normální Všechny opakování animace jsou reprodukovány, jak je uvedeno. Výchozí hodnota.
Zvrátit Všechny opakování animace jsou reprodukovány v opačném směru z toho, jak byly identifikovány.
Střídat. Každá lichá reklama animačního cyklu je reprodukována v normálním směru, každá dokonce reklama je reprodukována v opačném směru.
Alternativní-reverzní. Každá lichá reklama animačního cyklu je reprodukována v opačném směru, každá dokonce reklama je reprodukována v normálním směru.
počáteční Nastaví výchozí hodnotu vlastnosti.
zdědit. Zdědí hodnotu majetku z nadřazeného prvku.

Chcete-li zjistit, zda je opakování animačního cyklu dokonce nebo lichý - počet opakování začíná 1.

Syntax

Směr animace: normální; Směr animace: Reverzní; Směr animace: Alternativní; Směr animace: alternativní-reverzní; Směr animace: normální, reverzní; Směr animace: alternativní, reverzní, normální; Směr animace: počáteční; Směr animace: dědic;

7. Přehrávání animace: Nemovitost anace-play-State

Nemovitost Stav Animace-Play určuje, zda bude animace spuštěna nebo pozastavena. Zastavení animace uvnitř cyklu je možné pomocí této vlastnosti v skriptu JavaScript. Můžete také zastavit animaci, když se podíváte na kurzor myši na objekt - stav: vznášet se.

Nemovitost není zděděna.

Syntax

Animace-play-stav: běh; Animace-Play-State: Pozastaveno; Animace-Play-State: pozastavený, běh, běh; Animace-play-stav: počáteční; Animace-Play-State: Dědičný;

8. Zpoždění animace: vlastnost animace-zpoždění

Vlastnost zpoždění animace určuje, kdy začne animace. Nastavte v sekundách nebo milisekundách MS.

Nemovitost není zděděna.

Syntax

Zpoždění animace: 5s; Zpoždění animace: 3S, 10ms;

9. Stav prvku před a po přehrávání animace: vlastnost režimu animace-výplně

Nemovitost režimu Animace-Fill určuje, které hodnoty jsou aplikovány animací mimo dobu jeho provedení. Když je animace dokončena, element se vrátí do původních stylů. Ve výchozím nastavení animace neovlivní vlastnosti, když animace platí pro název animace a zpoždění animace. Navíc, ve výchozím nastavení animace neovlivní hodnoty vlastností po jeho dokončení - doba trvání animace a animace-iterace. Vlastnost režimu animace-výplně může toto chování přepsat.

Nemovitost není zděděna.

režim animace-výplň
Hodnoty:
žádný Výchozí hodnota. Stav prvku se nezmění před nebo po přehrávání animace.
Dopředu. Po ukončení animace (jak je definováno hodnotou počítání animace-iteration), animace použije hodnoty vlastností do konce animace. Pokud je počet animace-iterace-iterace větší, hodnoty se používají pro konec poslední dokončené iterace animace (a ne hodnoty pro začátek iterace, která bude následovně). Pokud je hodnota počítání animace-iterace-iterace nulová, použité hodnoty jsou ty, které spustí první iteraci (stejným způsobem jako v režimu animace-výplně režimu: dozadu;).
Pozpátku. Během období definovaného zpoždění animace bude animace aplikovat hodnoty vlastností definovaných v rámečku klíčů, které začnou první iteraci animace. Jedná se také o hodnotu od klíčového snímku (při animaci směru: normální nebo animační směr: alternativní) nebo hodnota klíčového snímku (při animaci směřování: reverzní nebo animační směr: alternativní).
Oba. Umožňuje zanechat prvek v prvním rámečku klíčů před spuštěním animace (ignorování kladné hodnoty zpoždění) a zpoždění na poslední snímek do konce poslední animace.

Syntax

Animace-Fill-Režim: Žádný; Animace-Fill-Režim: dopředu; Režim animace-výplň: dozadu; Animace-Fill-Režim: Oba; Režim Animace-Fill: Žádný, dozadu; Animace-Fill-režim: oba, dopředu, žádný;

10. Stručné nahrávání animace: vlastnost animace

Všechny parametry přehrávání animace lze kombinovat v jednom vlastnostu - animace, výpis do prostoru:
Animace: Animace-Name-Name Animace-Délka trvání animace-časování funkce animace-zpoždění anationation-iteration-počet animace směru;

Chcete-li hrát animaci, stačí zadat pouze dvě vlastnosti - název animace a animace, zbývající vlastnosti budou mít výchozí hodnoty. Postup transferu nemovitostí nezáleží na tom jediný, doba animace animace doba trvání musí nutně stát před zpožděním zpoždění animace.

11. Více animací

Pro jeden prvek můžete nastavit několik animací a seznam jejich jména přes čárku:

DIV (Animace: Shadow 1S Snadná výměna 0.5s alternativní, pohybuje 5S lineární 2S;)

Čím blíže se přiblížíme k začátku rozhraní, tím jasnější je pro uživatele. V životě se prakticky nic nestane okamžitě - otevírání sklenice Soda nebo zavírání očí před spaním, vidíme spoustu mezilehlých stavů, a ne ostrým "otevřeným / zavřeným", jak se to děje na webu.

Ve svém článku budu sdílet znalosti o CSS animaci a jak s ním pracovat. Animace dává místům dynamickou a zlepšuje pochopení jejich schopností. To oživuje webovou stránku a pomáhá komunikovat s uživatelem. Na rozdíl od CSS3 přechody, CSS animace je založena na klíčových snímcích. Které vám umožní hrát a opakovat efekty v čase zadaného času, stejně jako automaticky zastavit animaci v rámci cyklu.

Animace je sada klíčových rámců nebo kabelů uložených v CSS:

@Keyframes animační test (0% (šířka: 100px;) 100% (šířka: 200px;))

Podívejme se na to, co se tady děje. Klíčové slovo @KeyFrames označuje samotnou animaci. Pak je zde název animace, v našem případě - animační test. Kudrnaté závorky obsahuje seznam klece. Používáme výchozí rámec 0% a konečné 100% (mohou být také napsány jak z a do).
Podívejte se na kód níže. Animace lze nastavit a tak:

@KeyFrames animační test (od (šířka: 0;) 25% (šířka: 75px;) 75% (šířka: 150px;) k (šířka: 100%;))

Nezapomeňte, že pokud nejsou zadány počáteční nebo koncové rámečky, prohlížeč je určí automaticky, jako by na ně animace nebyla použita.

Animace můžete připojit k položce takto:

Selektor prvku (název animace: vaše-animace-jméno; doba animace: 2,5s;)

Vlastnost animace-name Nastaví název pro animaci @keyframes. Pravidlo doby trvání animace nastavuje dobu trvání animace v sekundách (1S, 30s, .5s) nebo milisekund (600ms, 2500ms).

Můžete také skupinové caiframumes:

@Keyframes animační test (0%, 35% (šířka: 50px;) 75% (šířka: 200px;) 100% (šířka: 100%;))

Můžete použít několik animací na jeden prvek (volič). Jejich jména a parametry musí být zaznamenány v objednávce aplikace:

Volič prvků (název animace: anim-name-1, anim-name-2; doba animace: 1s, 3s;)

Zpoždění animace:

Vlastnost Zpoždění animace nastaví zpoždění před reprodukci animace v sekundách nebo milisekundách:

Element-Selector (animace-name: Anim-Jméno-1; Doba trvání animace: 3s; Zpoždění animace: 2s; / * Před spuštěním animace se bude konat 2 sekundy * /)

Opakovat animaci:

Použití animace-iteration-počet můžeme indikovat počet opakování animace: 0, 1, 2, 3 atd. Nebo nekonečné pro smyčku:

Element-Selector (animace-name název: anim-name-1; doba trvání animace: 3s; Animace-zpoždění: 4s; animace-iteration-počet: 5; / * animace se hraje 5 krát * /)

Stav prvku před a po animaci:

Použití vlastnosti režimu animace-výplně, je možné určit v jakém stavu bude položka před animací a po dokončení:

    animace-Fill-Režim: dopředu; - animační prvek bude ve stavu posledního kabelu po dokončení / přehrávání;

    a. režim nimačního výplně: dozadu; - Prvek bude ve stavu prvního kavofreumu;

    animace-Fill-Režim: Oba; - Před zahájením animace bude prvek ve stavu prvního zaznamenaného, \u200b\u200bpo dokončení - ve stavu druhé.

Běh a zastavení animace:

Z tohoto důvodu je zodpovědná vlastnost animace-play-státu, což může mít dvě hodnoty: běh nebo pozastavený.

Element-Selector: Hover (Animace-Play-State: pozastaven;)

Směr animace:

Vlastnost Směr animace označuje, jak spravovat směr přehrávání animace. Zde jsou možné významy:

    směr animace: normální; - Animace je reprodukována v přímém pořadí;

    směr animace: Reverzní; - animace je reprodukována v opačném pořadí, od z;

    směr animace: Alternativní; - Opakování animace reprodukované v opačném pořadí, liché - v přímém;

    směr animace: Alternativní-reverzní; - Podivné opakování animace jsou reprodukovány v opačném pořadí, které jsou přímo.

Hladká funkce animovaného rámce:

Vlastnost Funkce pro časování animace umožňuje určit speciální funkci, která je zodpovědná za rychlost animace. Ve výchozím nastavení se animace začíná pomalu, rychle urychluje a zpomaluje na konci. Nyní máme následující předdefinované hodnoty: lineární, lehkost, snadná, snadná, snadná, snadná-in-out, krok-start, krokový konec.

Můžete však vytvořit takové funkce samostatně. Hodnota funkce animace-časování: Cubic-Bezier (P1x, P1y, P2X, P2Y); Přijmout argument Input 4 a vytvoří distribuci křivky procesu animace.

Přečtěte si více nebo zkuste vytvářet tyto funkce na webuhttp://cubic-bezier.com.

A konečně, animace může být rozdělena do sady jednotlivých hodnot (kroků) pomocí funkce kroky, která vyžaduje vstupní číslo kroků a směru (start nebo konec). Na níže uvedeném příkladu se animace skládá z 5 kroků, poslední z nich se vyskytne přímo před závěrem animace:

Element-Selector (animace-name: název anime-name-1; doba trvání animace: 3s; animace-zpoždění: 5s; animace-iteration-počet: 3; animace-časování - funkce: kroky (5, konec);)

Podpora pro prohlížeče pro animaci:

Hodnoty v tabulce označují první verzi prohlížeče, což plně podporuje vlastnost.

Hodnoty s -webkit-, -Moz- nebo -on označují první verzi, která pracovala s předponou.

Na stránkách https://www.w3schools.com Můžete se dozvědět více CSS Animantia (s příklady).
Jeden z populárních knihoven pro práci s animacemi -animovat.css.

Může se zdát, že obtíže, ke kterým se při práci s animací CSS nejsou oprávněné. Ale je to úplně špatné.

Za prvé, CSS je výkonný nástroj Zlepšit interakci rozhraní pomocí uživatele. To výrazně neovlivní výkon uživatelů. Na rozdíl od javascriptových analogů. Technologie pomocí výpočetní techniky GPU umožňuje pro prohlížeče optimalizovat rychlost identifikace prvků rychleji.

Zadruhé, flexibilita, rychlost a jednoduchost zavádění animací CSS pomůže "dýchat život" ve stávajících nebo nových rozhraních. Vypracování obecných a originálních přístupů, kteří pochopili zejména technologii, můžete učinit jedinečná rozhraní použitelnosti pro téměř všechny projekty.

Doufám v článek, který jste našli užitečné informace pro tebe. Všechna krásná místa. Nezapomeňte na animace :)