en begynder introduktion til css animation

en begynder introduktion til css animation,,,, i dag mere og mere websteder bruger tegnefilm, hvad enten det er i form af   gifs, svgs, webgl, baggrund, videoer osv.når de bruges korrekt,   informationstiltag på nettet   giver liv og interaktivitet, tilføjer et ekstra lag af feedback og erfaringer for brugerne.,, i denne lektion, jeg vil præsentere dig for   css animeringer, en meget performant måde at gøre ting, som   er   bliver mere og mere populær, som   browser støtte forbedres.efter at have dækket de grundlæggende spørgsmål, vi skal bygge et kort eksempel, som vil give næring til et kvadrat element i en cirkel:,,,, en introduktion til @ keyframes og animation,, den vigtigste komponent af css tegnefilm er  , @ keyframes, css   regel, hvor animation er skabt.tror i  , @ keyframes, som led i en tidslinje.indenfor, @ keyframes, kan du definere disse etaper, hver   under en anden stil erklæring.,, at css animeringer, du er nødt til at binde  , @ keyframes, til komitéen.det   gradvist vil analysere alle kode i  , @ keyframes,   erklæringer og ændre den oprindelige stil til den nye stil, baseret på de stadier,.,, @ keyframes, vi her sætter animation faser.vores @ keyframes, egenskaber:,,, et navn, vi vælger (, tutsfade, i dette tilfælde), faser: 0% - 100%;,,,,   (svarer til 0%), og til,   (svarende til 100%).,, css styles: den stil, at du gerne vil finde anvendelse for hver fase.,,, f.eks.:,, @ keyframes tutsfade {0% {uklarhed: 1} 100% {uklarhed: 0}}, eller:,, @ keyframes tutsfade {fra {uklarhed: 1} at {uklarhed: 0}}, eller forkortelse:,, @ keyframes tutsfade {til {uklarhed: 0}}, koden ovenfor, vil anvende en overgang til uklarhed af et element,   fra uklarhed: 1, til uklarhed: 0.hver af de   tilgange over   vil opnå det samme resultat.,, animation,,, animation, ejendom benyttes til at ringe, @ keyframes i en css vælgeren.animation har flere egenskaber:,,, animation navn:, @ keyframes navn (husk, vi valgte, tutsfade,.,, animation varighed: den tidsramme, længde, den samlede varighed af en informationskampagne fra start til slut.,, animation timing funktion: fastsætter   animation, lineære hastighed (



Previous:
Next Page: