| Počáteční hodnota | 0 s |
|---|---|
| Platí pro | všechny prvky, ::před a ::za pseudoprvky |
| Zděděno | Ne |
| Média | vizuální |
| Vypočítaná hodnota | jako specifikované |
| Typ animace | oddělený |
| Kanonické pořadí | jedinečné jednoznačné pořadí definované formální gramatikou |
Kompatibilita s prohlížečem
Tabulka kompatibility na této stránce je generována ze strukturovaných dat. Pokud byste chtěli přispět k datům, podívejte se na https://github.com/mdn/browser-compat-data a pošlete nám žádost o stažení.
Aktualizujte údaje o kompatibilitě na GitHubu
| plocha počítače | mobilní, pohybliví | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Okraj | Firefox | internet Explorer | Opera | Safari | Webové zobrazení Android | Chrome pro Android | Firefox pro Android | Opera pro Android | Safari na iOS | Internet Samsung | |
| animace-zpoždění | Chrome Plná podpora 43 Plná podpora 43 Plná podpora 3 Předpona Předpona | Plná podpora Edge 12 | Plná podpora Firefoxu 16 Poznámky Plná podpora 16Poznámky Poznámky Před Firefoxem 57, Firefox ne překreslit prvky mimo výřez, které jsou animovány do výřezu se zpožděním. Tato chyba se týká pouze některých platforem, jako je Windows. Plná podpora 49Předpona Předpona Implementováno s předponou dodavatele: -webkit- Plná podpora 44Předpona Zakázáno Předpona Implementováno s předponou dodavatele: -webkit- Zakázáno Od verze 44: tato funkce je za předvolbou layout.css.prefixes.webkit (nutno nastavit na true). Chcete-li změnit předvolby ve Firefoxu, navštivte about:config. Plná podpora 5Předpona Předpona Implementováno s předponou dodavatele: -moz- | Plná podpora IE 10 | Opera Plná podpora 30 Plná podpora 30 Plná podpora 15 Předpona Předpona Implementováno s předponou dodavatele: -webkit- Žádná podpora 12.1 - 15 Žádná podpora 12 - 15Předpona Předpona Implementováno s předponou dodavatele: -o- | Safari Plná podpora 9 Plná podpora 9 Plná podpora 4 Předpona Předpona Implementováno s předponou dodavatele: -webkit- | WebView Android Plná podpora 43 Plná podpora 43 Plná podpora ≤37 Předpona Předpona Implementováno s předponou dodavatele: -webkit- | Chrome Android Plná podpora 43 Plná podpora 43 Plná podpora 18 Předpona Předpona Implementováno s předponou dodavatele: -webkit- | Firefox Android Plná podpora 16 Plná podpora 16 Plná podpora 49 | |||
Animace CSS se nemusí spouštět ihned po inicializaci. Můžete ovládat, kdy začne používat vlastnost transition-delay. Chcete-li zpozdit přechod o určitou dobu, zadejte jej v hodnotě vlastnosti:
Přechodové zpoždění: 1s; /* oddálit začátek animace o jednu sekundu */
Tato vlastnost se málo používá při implementaci jednoduché interaktivity na webu, ale může být velmi užitečná, pokud musíte vytvářet složitější efekty. Analogicky k přechodu-trvání můžete zapsat dobu zpoždění pro každou vlastnost specifikovanou v přechodové vlastnosti (je také důležité dodržet pořadí výčtu):
Přechodová vlastnost: barva, barva pozadí, mezera mezi písmeny; doba trvání přechodu: 1 s, 0,5 s, 2 s; přechodové zpoždění: 0s, 0s, 2s; /* zpoždění animace mezer mezi písmeny o 2 sekundy */
Nezapomeňte na kompatibilitu mezi prohlížeči - absolutně všechny rodinné vlastnosti přechod vyžadují použití předpon dodavatele:
Webkit-transition-delay: 1s; -moz-transition-delay: 1s; -o-zpoždění přechodu: 1s; přechodové zpoždění: 1s;
Praktické použití
Vlastnost přechodu-zpoždění se v praxi často používá při vytváření rozbalovacích nabídek, které se otevírají při najetí myší. V tomto případě se píše nejen pro počáteční stav, ale i pro konečný.
Možná jste si všimli, že na některých stránkách mizí rozbalovací podnabídky příliš rychle, takže je obtížné je zachytit požadovaný odkaz a klikněte na něj. Vlastnost transition-delay, nastavená pro běžný prvek a pro prvek s pseudo-class:hover, pomáhá tomuto chování zabránit. Hodnoty se budou lišit: pro normální stav by vlastnost přechodu-zpoždění měla být větší než nula a pro stav přechodu by měla být 0. Příklad:
Podnabídka ( opacity: 0; transition-property: all; transition-duration: .5s; transition-delay: 1s; ) .menu:hover .submenu ( opacity: 1; transition-delay: 0s; )
Tento kód způsobí, že se nabídka bez prodlevy objeví po najetí myší a po jedné sekundě zmizí. Tento trik určitě učiní menu pohodlnějším.
Vlastnost animation-delay nastavuje dobu čekání před spuštěním smyčky animace. Hodnota 0s nebo 0ms spustí animaci okamžitě. Záporná hodnota také umožňuje animaci bez zpoždění, ale může způsobit, že se animace začne zobrazovat jinak.
Je povoleno zadat několik hodnot oddělených čárkami.
stručné informace
Syntax
zpoždění animace:<время> [,<время>]*
Označení
| Popis | Příklad | |
|---|---|---|
| <тип> | Označuje typ hodnoty. | <размер> |
| A && B | Hodnoty musí být na výstupu v uvedeném pořadí. | <размер> && <цвет> |
| A | B | Označuje, že musíte vybrat pouze jednu z navržených hodnot (A nebo B). | normální | malokapitálky |
| A || B | Každá hodnota může být použita samostatně nebo společně s ostatními v libovolném pořadí. | šířka || počet |
| Hodnoty skupin. | [ plodina || přejít ] | |
| * | Opakujte nula nebo vícekrát. | [,<время>]* |
| + | Opakujte jednou nebo vícekrát. | <число>+ |
| ? | Zadaný typ, slovo nebo skupina je volitelná. | vložka? |
| (A, B) | Opakujte alespoň A, ale ne více než Bkrát. | <радиус>{1,4} |
| # | Opakujte jednou nebo vícekrát odděleně čárkami. | <время># |
Příklad
Objektový model
Objekt.style.animationZpoždění
Poznámka
Chrome, Safari a Android podporují vlastnost -webkit-animation-delay.
Opera do verze 12.10 podporuje vlastnost -o-animation-delay.
Firefox až do verze 16 podporuje vlastnost -moz-animation-delay.
Specifikace
Každá specifikace prochází několika fázemi schvalování.
- Doporučení – Specifikace byla schválena W3C a je doporučena jako standard.
- Doporučení kandidáta ( Možné doporučení) - skupina odpovědná za standard je spokojena, že splňuje své cíle, ale vyžaduje pomoc od vývojářské komunity při implementaci standardu.
- Navrhované doporučení Doporučené doporučení) - v této fázi je dokument předložen poradní radě W3C ke konečnému schválení.
- Working Draft – Vyspělejší verze návrhu, která byla prodiskutována a upravena pro komunitní recenzi.
- Předloha editora ( Redakční návrh) - návrhová verze normy po změnách, které provedli redaktoři projektu.
- Koncept ( Návrh specifikace) - první verze návrhu normy.
Prohlížeče
Prohlížeče
V tabulce prohlížeče jsou použity následující zápisy.
Zpoždění animace CSS při opakování (5)
Zde je malý úryvek, který ukazuje totéž 75% času, pak to sklouzne. Tento opakující se vzor dobře emuluje latenci:
@-webkit-keyframes slide ( 0 % (pozice-pozadí: 0 0;) 25 % (pozice-pozadí: 0 0;) 50 % (pozice-pozadí: 0 0;) 75 % (pozice-pozadí: 0 0; ) 100 % (pozice-pozadí: 13em 0;) ) @-moz-klíčové snímky snímek ( 0 % (pozice-pozadí: 0 0;) 25 % (pozice-pozadí: 0 0;) 50 % (pozice-pozadí: 0 0;) 75 % (pozice na pozadí: 0 0;) 100 % (pozice na pozadí: 13em 0;) ) snímek @klíčové snímky ( 0 % (pozice na pozadí: 0 0;) 25 % (pozice na pozadí: 0 0 ;) 50 % (pozice-pozadí: 0 0;) 75 % (pozice-pozadí: 0 0;) 100 % (pozice-pozadí: 13em 0;) )
Nedávno jsem objevil, jak „správně“ používat CSS animace (předtím jsem je zavrhl, protože neumím vytvářet složité sekvence, jako byste mohli v JavaScriptu). Takže teď se o nich učím.
Pro tento efekt se snažím, aby přechodový "blesk" pokryl prvek podobný postupu. Podobně jako u nativních ukazatelů průběhu ve Windows Vista/7.
@keyframes barshine ( from (background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0)%); to (0) 0 background -image:linear-gradient(120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);) ) ) ) 1 bar animace. ;)
Jak vidíte, snažím se získat 4sekundové zpoždění následované 1sekundovým zábleskem, opakování.
Zdá se však, že animace-zpoždění je aplikováno pouze na první iteraci, po které se třpytky jen otáčí.
Tento problém jsem "vyřešil" následovně:
@keyframes expbarshine ( from (background-image:linear-gradient(120deg,rgba(255,255,255,0)) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0%);) 8) 8) ( background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);) to (linearground-image: gradient (120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0,25) 105%,rgba(255,255,255,0) 110%);) .progbar ( animace lineární: barshine ;5
od a 80 % jsou naprosto stejné, což má za následek „zpoždění“ o 80 % délky animace.
To funguje, ale pro mou další animaci potřebuji, aby zpoždění bylo proměnlivé (konstantní pro konkrétní prvek, ale proměnlivé mezi prvky používajícími animaci), zatímco samotná animace zůstává stejně dlouhá.
S výše uvedeným „řešením“ dostanu pomalejší animaci, když vše, co chci, je delší zpoždění.
Je možné použít animaci-zpoždění na všechny iterace, nejen na první?
minitech má pravdu, že animation-delay určuje zpoždění před zahájením animace a NE zpoždění mezi iteracemi. Editor návrhu specifikací to dobře popisuje a o této funkci, kterou popisujete, která nabízí tuto funkci zpoždění iterace, zde byla diskuze.
I když v JS může existovat řešení, můžete toto zpoždění iterace předstírat, abyste blikali ukazatel průběhu pouze pomocí CSS.
Deklarováním pozice pozice pochodně:absolutní a přetečení nadřazeného divu: skryté, nastavením stavu klíčového snímku o 100 % větším, než je šířka ukazatele průběhu a hraním s funkcí kubického Bézierova časování a hodnotami offsetu vlevo, můžete napodobit světlo. režim náběhu/doběhu nebo lineární čas se „zpožděním“.
Bylo by zajímavé napsat menší/scss mixin pro přesný výpočet funkce posunu doleva a času, abych to dostal přesně, ale teď nemám čas si s tím hrát. Něco takového bych rád viděl!
Zde je ukázka, kterou jsem dal dohromady, abych to ukázal. (Snažil jsem se napodobit indikátor Provádění systému Windows 7 a trochu spadl, ale ukazuje to, o čem mluvím)
/* CSS */ @keyframes progress ( from ( width: 0px; ) to ( width: 600px; ) ) @keyframes barshine ( 0% (vlevo: -100px; ) 100% (left: 1000px; ) ) .flare (animace) -název: barshine; trvání animace: 3 s; směr animace: normální; režim vyplnění animace: dopředu; funkce časování animace: cubic-bezier(.14, .75, .2, 1.01); animace-iterace -počet: nekonečno; vlevo: 0; nahoře: 0; výška: 40px; šířka: 100px; pozice: absolutní; pozadí: -moz-radial-gradient(střed, kryt elipsy, rgba(255,255,255,0,69) 0%, rgba( 255,255,255,0) 87%); /* FF3.6+ */ pozadí: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.69)) , color-stop(87%,rgba(255,255,255,0))); /* Chrome,Safari4+ */ pozadí: -webkit-radial-gradient(střed, elipsa, rgba(255,255,255,0,69) 0%,rgba(2555,255, ,0) 87%); /* Chrome10+,Safari5.1+ */ pozadí: -o-radial-gradient(střed, kryt elipsy, rgba(255,255,255,0,69) 0%,rgba(255,255,255,0) 87%); /* Opera 12+ */ pozadí: -ms-radial-gradient(střed, elipsa kryt, rgba(255,255,255,0,69) 0%,rgba(255,255,255,0) 87%); /* IE10+ */ pozadí: radial-gradient(elipsa ve středu, rgba(255,255,255,0,69) 0%,rgba(255,255,255,0) 87%); /* W3C */ filtr: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b0ffffff", endColorstr="#00ffffff",GradientType=1); /* IE6-9 záložní na horizontálním přechodu */ z-index: 10; ) .progress ( název-animace: průběh; trvání-animace: 10s; zpoždění-animace: 1s; funkce-časování animace: lineární; počet-animací: nekonečno; přetečení: skryté; pozice: relativní; z-index: 1; výška: 100 %; šířka: 100 %; pravý okraj: 1px plný #0f9116; pozadí: #caf7ce; /* Staré prohlížeče */ pozadí: -moz-linear-gradient(top, #caf7ce 0%, #caf7ce 18 %, #3fe81e 45 %, #2ab22a 96 %); /* FF3.6+ */ pozadí: -webkit-gradient(lineární, vlevo nahoře, vlevo dole, color-stop(0%,#caf7ce), color-stop(18%,#caf7ce), color-stop(45%,#3fe81e), color-stop(96%,#2ab22a)); /* Chrome,Safari4+ */ pozadí: -webkit-linear-gradient(top, #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96%); /* Chrome10+,Safari5.1+ */ pozadí: -o-linear-gradient(top, #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96%); /* Opera 11.10+ */ pozadí: -ms-linear-gradient(top, #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96%); /* IE10+ */ pozadí: linear-gradient(to bottom, #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96%); /* W3C */ filtr: progid:DXImageTransform.Microsoft.gradient(startColorstr="#caf7ce", endColorstr="#2ab22a",GradientType=0); /* IE6-9 */ ) .progress:after ( obsah: ""; šířka: 100 %; výška: 29px; vpravo: 0; dole: 0; pozice: absolutní; z-index: 3; pozadí: -moz- linear-gradient(left, rgba(202,247,206,0) 0%, rgba(42,178,42,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(202,247,206,0)), color-stop(100%,rgba(42,178,42,1))); /* Chrome,Safari4+ */ pozadí: -webkit-linear-gradient(left , rgba(202,247,206,0) 0%,rgba(42,178,42,1) 100%); /* Chrome10+,Safari5.1+ */ pozadí: -o-linear-gradient(left, rgba(202,247,206,0) %,rgba(42,178,42,1) 100%); /* Opera 11.10+ */ pozadí: -ms-linear-gradient(left, rgba(202,247,206,0) 0%,rgba(42,178,42,1) 100 %); /* IE10+ */ pozadí: linear-gradient(doprava, rgba(202,247,206,0) 0%,rgba(42,178,42,1) 100%); /* W3C */ filtr: progid:DXImageTransform.Microsoft .gradient(startColorstr="#00caf7ce", endColorstr="#2ab22a",GradientType=1); /* IE6-9 */ ) .bar ( margin-top: 30px; height: 40px; width: 600px; position: relativní ; ohraničení: 1px plný #777; border-radius: 3px; )
Měl jsem podobný problém a použil
@-webkit-keyframes pan ( 0%, 10% ( -webkit-transform: translate3d(0%, 0px, 0px); ) 90%, 100% ( -webkit-transform: translate3d(-50%, 0px, 0px) ;))
Trochu nepříjemné je, že musíte předstírat dobu trvání, abyste zohlednili „zpoždění“ na obou koncích.
To je to, co byste měli udělat. Mělo by to fungovat tak, že máte 1 sekundovou animaci a poté 4 sekundové zpoždění mezi iteracemi:
@keyframes barshine ( 0% ( background-image:linear-gradient(120deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0,25) -5%,rgba(255,255,255,0) 0%); 2% background-image:linear-gradient(120deg,rgba(255,255,255,0) 10%,rgba(255,255,255,0,25) 105%,rgba(255,255,255,0) 110%); (infinite barg: finite barg; ) .prog. )
Takže jsem se s tím hodně pohrával a můžete to udělat, aniž byste byli velmi hackováni. Toto je nejjednodušší způsob, jak nastavit prodlevu mezi iteracemi animace: 1. SUPER SNADNÉ a 2. jen to vyžaduje trochu logiky. Podívejte se na tuto taneční animaci, kterou jsem vytvořil:
Tanec( název-animace: tanec; -název-webkitu: tanec; počet-iterací-webu: nekonečno; -počet-iterací-webkitu: nekonečno; trvání-animace: 2,5 s; -Trvání-webkitu-animace: 2,5 s; -webkit-animation-delay: 2.5s; animation-delay: 2.5s; animation-timing-function: easy-in; -webkit-animation-timing-function: Easy-in; ) @keyframes dance ( 0 % ( -webkit-transform: otáčet (0 stupňů); -moz-transformovat: otáčet (0 stupňů); -o-transformovat: otáčet (0 stupňů); -ms-transform: otáčet (0 stupňů); transformovat: otáčet (0 stupňů); ) 25 % ( -webkit-transform: otočit (-120 stupňů); -moz-transform: otočit (-120 stupňů); -o-transformovat: otočit (-120 stupňů); -ms-transform: otočit (-120 stupňů); transformovat: otočit ( -120 stupňů); ) 50 % ( -webkit-transform: otočení (20 stupňů); -moz-transform: otočení (20 stupňů); -o-transform: otočení (20 stupňů); -ms-transform: otočení (20 stupňů); transformace: otočit (20 stupňů); ) 100 % ( -webkit-transform: otočit (0 stupňů); -moz-transform: otočit (0 stupňů); -o-transform: otočit (0 stupňů); -ms-transform: otočit (0 stupňů); transformovat : rotace (0 stupňů); ) ) @-webkit-keyframes dance ( 0 % ( -webkit-transform: rotation(0deg); -moz-transform:otočte(0deg); -o-transform:otočte(0deg); -ms-transform:otočte(0deg) ); transform: rotace (0 stupňů); ) 20 % ( -webkit-transform: rotace (20 stupňů); -moz-transform: rotace (20 stupňů); -o-transform: rotace (20 stupňů); -ms-transform: rotace( 20 stupňů); transformace: otočení (20 stupňů); ) 40 % ( -webkit-transform: otočení (-120 stupňů); -moz-transform: otočení (-120 stupňů); -o-transformace: otočení (-120 stupňů); -ms- transform: otočit (-120 stupňů); transformovat: otočit (-120 stupňů); ) 60 % ( -webkit-transform: otočit (0 stupňů); -moz-transform: otočit (0 stupňů); -o-transformovat: otočit (0 stupňů); -ms-transform: otočit (0 stupňů); transformovat: otočit (0 stupňů); ) 80 % ( -webkit-transform: otočit (-120 stupňů); -moz-transformovat: otočit (-120 stupňů); -o-transformovat: otočit ( -120 stupňů); -ms-transform: otočení (-120 stupňů); transformace: otočení (-120 stupňů); ) 95 % ( -webkit-transform: otočení (20 stupňů); -moz-transform: otočení (20 stupňů); -o- transformace: otočení (20 stupňů); -ms-transformace: otočení (20 stupňů); transformace: otočení (20 stupňů); ))
Vlastně jsem sem přišel, abych přišel na to, jak zpozdit animaci, když jsem si uvědomil, že stačí 1. prodloužit dobu trvání animace a nastavit poměr času pro každou animaci. Beore I měl každý z nich trvat 0,5 sekundy v celkové délce 2,5 sekundy. Nyní mi dovolte říci, že jsem chtěl přidat zpoždění rovnající se celkovému trvání, takže zpoždění je 2,5 sekundy.
Doba animace je 2,5 sekundy a zpoždění je 2,5, takže dobu trvání změníte na 5 sekund. Protože jste však zdvojnásobili celkovou dobu trvání, musíte část animace snížit na polovinu. Níže se podívejte na nejnovější. Tohle mi fungovalo skvěle.
@-webkit-keyframes dance ( 0 % ( -webkit-transform: rotace(0°); -moz-transform: rotace(0°); -o-transform: rotace(0°); -ms-transform: rotace(0°); transform: otočit (0 stupňů); ) 10 % ( -webkit-transform: otočit (20 stupňů); -moz-transform: otočit (20 stupňů); -o-transformovat: otočit (20 stupňů); -ms-transform: otočit (20 stupňů)) ; transform: rotace (20 stupňů); ) 20 % ( -webkit-transform: rotace (-120 stupňů); -moz-transform: rotace (-120 stupňů); -o-transform: rotace (-120 stupňů); -ms-transform: otočit (-120 stupňů); transformovat: otočit (-120 stupňů); ) 30 % ( -webkit-transform: otočit (0 stupňů); -moz-transform: otočit (0 stupňů); -o-transformovat: otočit (0 stupňů); -ms -transformovat: otočit (0 stupňů); transformovat: otočit (0 stupňů); ) 40 % ( -webkit-transform: otočit (-120 stupňů); -moz-transformovat: otočit (-120 stupňů); -o-transformovat: otočit (-120 stupňů); ); -ms-transform: otočit (-120 stupňů); transformovat: otočit (-120 stupňů); ) 50 % ( -webkit-transform: otočit (0 stupňů); -moz-transform: otočit (0 stupňů); -o-transformovat: otočit (0 stupňů); -ms-transformovat: otočit (0 stupňů); transformovat: otočit (0 stupňů); ))
Toto jsou vaše výpočty, které pravděpodobně používáte, abyste zjistili, jak změnit dobu trvání animace a % každé části.
trvání_přání = x
wish_duration = animation_part_duration1 + animation_part_duration2 + ... (a tak dále)
celková doba trvání = x + y
animation_part_duration1_actual = animation_part_duration1 * wish_duration / total_duration
Udělal jsem plakát na zeď, který se v intervalech pohybuje doleva a doprava. U mě funguje toto:
Div-animace ( -webkit-animation: odskok 2000 ms zmírnění-out; -moz-animace: odskok 2000 ms zmírnění-out; -o-animace: odskočení 2000 ms zmírnění-out; animace: odskočení 2000 ms uvolnění nekonečno; -webkit-animation -delay: 2s; /* Chrome, Safari, Opera */ animation-delay: 2s; transform-origin: 55 % 10 %; ) @-webkit-keyframes bounce ( 0 % ( transform: rotation(0deg); ) 3 % ( transformace: rotace (1°); ) 6 % ( transformace: rotace (2°); ) 9 % ( transformace: rotace (3°); ) 12 % ( transformace: rotace (2°); ) 15 % ( transformace: rotace (1°) ) ); ) 18 % ( transformace: otočení (0 stupňů); ) 21 % ( transformace: otočení (-1 stupeň); ) 24 % ( transformace: otočení (-2 stupně); ) 27 % ( transformace: otočení (-3 stupně); ) 30 % ( transformace: rotace (-2°); ) 33 % ( transformace: rotace (-1°); ) 36 % ( transformace: rotace (0°); ) 100 % ( transformace: rotace (0°); ) )