Animate.css har eksisteret et par år nu, og jeg må indrømme, at jeg var ret for sent til festen. Jeg opdagede det kun for et par måneder siden, mens jeg søgte på nettet efter nogle CSS-animationstutorials og fandt, hvad der skal være den hurtigste, enkleste måde at animere rundt på, Animate.css.
Oprettet af en fyr kaldet Dan Eden, er Animate.css en hurtig måde at se, hvordan CCS fungerer og få nogle animationshandlinger på dit websted.
Beskrevet som 'Just-add water CSS animation' Animate.css er lidt sjovt med en seriøs side. Det gør det muligt for selv amatørwebdesignere som mig hurtigt at få fat på de grundlæggende elementer i CSS-animation og skabe enkle, men effektive effekter til websteder. Fra en enkelt animeret overskrift til mere involverede bevægelser kan dette værktøj gøre det.
Animate.css
Animate.css kan downloades fra GitHub og er i det væsentlige et bibliotek med enkle CSS-effekter samlet et sted. Hver animation er pænt pakket og klar til brug. Alt hvad du skal gøre er at finde den animation, du kan lide, og anvende klassen. Det er virkelig alt, hvad der er der til.
Du behøver ikke at downloade hele biblioteket, hvis du ikke vil, da der er 2.500 koder i det. Du kan besøge Animate.css-webstedet, finde en animation og klikke på linket Download Animate.css. Det indlæser klassen på en webside, hvor du kan kopiere og bruge, som du finder det passende.
Det er dog lettere at bruge GitHub og bor ned for at finde den effekt, du leder efter.
- Naviger til css GitHub-siden.
- Klik på linket Kilde for at få adgang til listen over elementer.
- Vælg den effekttype, du leder efter, på listen. Bounce er en opmærksomhedssøger, så vælg linket opmærksomhedssøgende.
- Vælg bounce.css.
- Kopier koden, og anbring den på din side for at anvende animationen.
Det er virkelig så enkelt. Du vil naturligvis vælge forskellige indstillinger for de forskellige effekter, men slutresultatet er det samme. Adgang til den kode, der er nødvendig for at udføre den tunge løft på siden.
Bygning af et animeret objekt med Animate.css
At opbygge noget cool med Animate.css er enkelt. Det er bare et spørgsmål om at finde CCS-koden og tilføje den til din egen CSS. Hvis jeg kan gøre det, kan hvem som helst!
Den første mulighed på siden Animate.css er hopp, så lad os bruge det i dette eksempel.
- Sæt ind ' ' inde i dit typografiark.
- Find CSS for den ønskede animation, og tilføj den til det element, du vil animere. Tilføj f.eks. ' 'for at tilføje denne afvisningseffekt til test, et billede eller hvad som helst.
- Tilføj følgende CSS-kode for at det hele fungerer. Taget fra bounce.css ovenfor.
@keyframes studs {
fra 20%, 53%, 80% til {
animation-timing-funktion: kubik-bezier (0, 215, 0, 610, 0, 355, 1.000);
transform: translate3d (0, 0, 0);
}
40%, 43% {
animation-timing-funktion: kubik-bezier (0, 755, 0, 050, 0, 855, 0, 060);
transform: translate3d (0, -30px, 0);
}
70% {
animation-timing-funktion: kubik-bezier (0, 755, 0, 050, 0, 855, 0, 060);
transform: translate3d (0, -15px, 0);
}
90% {
transform: translate3d (0, -4px, 0);
}
}
.bounce {
animations-navn: bounce;
transform-oprindelse: midterste bund;
}
At tage animationen videre med Animate.css
Ovenstående sekvens tilføjer en afvisningseffekt, når siden først indlæses, hvilket er cool, men en engangs ting. Hvad med at tilføje det til svevet. På den måde hopper det, når nogen svæver over testen. Det er ikke noget, jeg ville gøre på et produktionswebsted, men det er en fantastisk måde at demonstrere, hvordan alt fungerer.
Føj følgende kode til din CSS for at tilføje bounce on hover-effekten. Hver gang musen svæver over elementet, skal den hoppe.
. vedtaget: hover {
-webkit-animation-varighed: 1s;
-moz-animation-varighed: 1s;
-ms-animation-varighed: 1s;
-o-animation-varighed: 1s;
animationsvarighed: 1s;
-webkit-animation-fill-mode: begge dele;
-moz-animation-fill-mode: begge;
-ms-animation-fill-mode: begge;
-o-animation-fyld-tilstand: begge;
animation-fill-mode: begge;
}
Hvis du kender CSS, ved du meget bedre end jeg om, hvordan man implementerer forskellige effekter på forskellige handlinger. Som nybegynder hjælper dette og bibliotekerne i Animate.css mig med at skabe grundlæggende, men effektive animationer til mine websider.
Jeg ved ikke, hvor mange jeg ville bruge på et live websted, da de ikke altid går for godt ned, og mobilbrugere ser ikke ud til at kunne lide dem meget overhovedet. Som en lektion i, hvordan CSS fungerer, og hvordan det kan bruges til at forbedre internettet, er det imidlertid en stor ressource. Jeg er bare en nybegynder, men selv at bruge et par timer med Animate.css til denne tutorial har lært mig meget. Jeg tror, jeg vil spille med det meget mere, før jeg er færdig. Hvad med dig?
