Keyframe Animation Syntax - CSS-trükkök

Anonim

Alapnyilatkozat és használat

@-webkit-keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) ) @-moz-keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) ) @-o-keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) ) @keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) )
#box ( -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */ -moz-animation: NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */ -o-animation: NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */ animation: NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */ )

A rövidség kedvéért az ezen az oldalon található kód többi része nem használ semmilyen előtagot, de a valós világ használatakor az összes szállító előtagot felülről kell használni

Több lépés

@keyframes fontbulger ( 0% ( font-size: 10px; ) 30% ( font-size: 15px; ) 100% ( font-size: 12px; ) ) #box ( animation: fontbulger 2s infinite; )

Ha egy animációnak ugyanazok a kezdő és befejező tulajdonságai vannak, ennek egyik módja az, hogy vesszővel elválasztja a 0% és 100% értékeket:

@keyframes fontbulger ( 0%, 100% ( font-size: 10px; ) 50% ( font-size: 12px; ) )

Vagy mindig megmondhatja az animációnak, hogy fusson kétszer (vagy akár páros számúszor), és mondja meg az irányt alternate.

Kulcsképes animáció hívása külön tulajdonságokkal

.box ( animation-name: bounce; animation-duration: 4s; /* or: Xms */ animation-iteration-count: 10; animation-direction: alternate; /* or: normal */ animation-timing-function: ease-out; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */ animation-fill-mode: forwards; /* or: backwards, both, none */ animation-delay: 2s; /* or: Xms */ )

Animáció Gyorsírás

Csak térrel válassza el az összes egyéni értéket. A sorrend nem számít, kivéve, ha mind az időtartamot, mind a késleltetést használja, ebben a sorrendben kell lenniük. Az alábbi példában 1s = időtartam, 2s = késés, 3 = iterációk.

animation: test 1s 2s 3 alternate backwards

Kombinálja az átalakítást és az animációt

@keyframes infinite-spinning ( from ( transform: rotate(0deg); ) to ( transform: rotate(360deg); ) )

Több animáció

Vesszővel elválaszthatja az értékeket, hogy a kijelölőn több animációt deklaráljon.

.animate-this ( animation: first-animation 2s infinite, another-animation 1s; )

Lépések()

A steps () függvény pontosan meghatározza, hogy hány kulcskép jelenjen meg az animáció időkeretében. Tegyük fel, hogy kijelenti:

@keyframes move ( from ( top: 0; left: 0; ) to ( top: 100px; left: 100px; ) )

Ha az animációban a (10) lépéseket használja, akkor az biztosítja, hogy csak 10 kulcskép történjen a megadott idő alatt.

.move ( animation: move 10s steps(10) infinite alternate; )

A matek ott szépen sikerül. Minden másodpercben az elem 10px-t balra és 10px lefelé mozgatja az animáció végéig, majd örökre ismét fordítva.

Ez nagyszerű lehet a spritesheet animációkhoz, mint ez a simurai bemutatója.

Böngésző támogatás

Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.

Asztal

Króm Firefox AZAZ Él Szafari
4 * 5 * 10. 12. 5,1 *

Mobil / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 4 * 6,0–6,1 *

További források

  • MDN Docs
  • MDN: CSS animáció használata
  • Használhatom - Böngésző támogatás
  • VIDEÓ: Bevezetés a CSS animációkba