Hvordan lage tekst Fade i CSS

Opprette nøkkel i CSS gjør det mulig å animere noen del av websiden. Når du oppretter nøkkelbilder i stilarket, blir de tilgjengelige for gjenbruk på så mange sideelementer som du vil. Fading tekst i CSS krever en keyframing kode som setter opacity til full på ett punkt i animasjonen og endrer det til full åpenhet på et annet punkt.

Bruksanvisning

1 Åpne stilark for websiden i Notepad eller en kode editor. Hvis websiden ennå ikke har en, kan du opprette en tom fil og lagre den som Legg til denne linjen etter "<title>" koder i HTML-koden på websiden for å legge til stylesheet "style.css.":

<Link rel = "stylesheet" href = "sti / til / style.css" type = "text / css" />

Change "sti / til / style.css" til filen sti som fører til stilark.

2 Lag en keyframe animasjon i stilarket ved hjelp av følgende syntaks:

@keyframes fade-tekst {
0%, 100% {
}
50% {
}
}

Legg CSS egenskaper som "farge" eller "opacity" inne i klammeparenteser ved siden av prosenter. Hvert prosent nummer i nøkkel representerer en posisjon i animasjonen, eller et nøkkelbilde. Angi start- og sluttposisjonene til de samme egenskapene kan du sløyfe animasjon jevnt.

3 Sett hver keyframe til en annen dekkevne:

@keyframes fade-tekst {
0%, 100% {

opacity: 1;

}
50% {

opacity: 0;

}
}

Ved å gjøre "opacity" lik en for begynnelsen og slutten av denne animasjonen, gjør du det starter og stopper ved full dekkevne. En null opacity på 50 prosent på landsbasis fades animasjonen helt ut halvveis gjennom; sette den til desimal punkt verdier som "0.5" hvis du ikke vil at animasjonen å stadig bli usynlig.

4 Skriv en ny stil regel for teksten du ønsker å gjøre en fading animasjon på:

fading_text {

}

I eksemplet "#fading_text" er en ID velger som finner at en tag på siden med en ID "fading_text." Åpne din webside og se på koden for å finne eller legge til en ID for kodene som omgir teksten. Legg til koder som dette hvis du trenger tags: <span id = "fading_text"> tekst å animere </ span>.

5 Ring keyframe animasjon inne stilen regelen:

fading_text {

animasjon: fade-tekst 10s uendelige;
}

Den første verdien er navnet på keyframe, etterfulgt av varighet i sekunder og deretter en repetisjon type. En uendelig repetisjon looper animasjon om og om igjen; erstatte dette med et heltall som "10" for å angi et endelig antall løkker.

6 Gå gjennom og kopiere både keyframe animasjon selv og eventuelle samtaler til animasjon. Du må ha en kopi av koden prefiks "-webkit" og en annen kopi prefikset "-moz" for å gjøre koden kompatibel med Chrome, Safari og Firefox:

@ -webkit-Keyframes fade-tekst {
0%, 100% {

opacity: 1;

}
50% {

opacity: 0;

}
}
@ -moz-Keyframes fade-tekst {
0%, 100% {

opacity: 1;

}
50% {

opacity: 0;

}
}

fading_text {

-webkit-animasjon: fade-tekst 10s uendelig;
-moz-animasjon: fade-tekst 10s uendelig;
}

Hint

  • Flip tetthetsinnstillinger i dine nøkkel så den første keyframe har en null opasitet og andre har full dekkevne. Dette gjør teksten fade inn på siden.
  • I Internet Explorer nettlesere 9 og under, vil teksten ikke animere. Dette er fordi disse nettleserne er ikke kompatible med hovedbilde animasjoner. Imidlertid vil teksten fortsatt vises på siden.