Video: Filter CSS3 - 02 Blur - Efectos Fotograficos @JoseCodFacilito 2024
Å få en CSS3-animasjon akkurat, kan være vanskelig. Hver utvikler har forskjellige ferdigheter og måter å vise oppgaver på. Stylie er designet for utviklere som er mer visuelt orienterte. Du velger et start- og sluttpunkt for animasjonen, ved hjelp av X- og Y-verdiene.
R-verdien bestemmer hvor mye rotasjon som det animerte objektet utfører. Du kan velge hvor lenge animasjonen skjer ved hjelp av tidsverdiene. I tillegg kan X-, Y- og R-verdiene hver ha en animasjonseffekt knyttet til dem.
Mange animasjoner beveger seg i mer enn én retning. Klikk på plustegnet (+) for å legge til en annen retning. Denne retningen har også X, Y og R-verdier, og du kan også angi dens varighet og spesialeffekter. Kort sagt, du kan bruke dette grensesnittet til å lage utrolig komplekse animasjonseffekter som går i mer enn én retning.
Bevegelsesfanen definerer egenskapene til animasjonen, for eksempel hvor mange ganger du vil at animasjonen skal utføres (du kan velge å gjøre utførelsen en uendelig sløyfe) og hvordan objektet du animerer burde samhandle med animasjonsbanen.
Dette er også fanen du bruker til å definere lettelsen som brukes til å flytte den animerte effekten jevnt. En rettlinjeanimasjon er enkel, men lettelsen blir viktig når du begynner å jobbe med animasjoner som beveger seg i mer enn én retning.
Når du er ferdig med å konfigurere animasjonen, klikker du på CSS-fanen, som inneholder CSS du bruker til å lage den animerte effekten i programmet. CSS-fanen lar deg velge et navn for animasjonsklassen. Du kan også velge hvilke leverandører som skal inkluderes som en del av CSS og animasjonskvalitetsnivået.
HTML-fanen inneholder eksempelkoder du trenger for å fullføre animasjonen. Dette er hvor du må gjøre endringer for å inkludere objektet du vil animere i stedet for den enkle sirkelen som leveres av Stylie.
