# Tekstanimationer til sociale medier: stig op, pop, fej, skrivemaskine

[Canonical HTML page](https://gradiently.design/da/guide/text-animation-ideas)

Du behøver ikke halvtreds effekter. Fire entréer, valgt godt og timet rigtigt, klarer stories, Reels, annonceringer og citater. Her er, hvilken du skal bruge hvornår.

## The short version

- Stig op, pop, fej og skrivemaskine er fire stilarter til tekstanimation, der dækker de fleste opslag på sociale medier.
- Stig op passer til rolige, eksklusive og redaktionelle budskaber; pop passer til korte, energiske ord som priser og tilbud.
- Fej afslører en linje som et tæppe og virker til overskrifter og før og efter-afsløringer; skrivemaskine passer til citater, spørgsmål og alt, der skal føles skrevet i øjeblikket.
- De fleste entréanimationer læses bedst mellem cirka et kvart og tre kvart sekund, efterfulgt af en pause, der er lang nok til at læse linjen to gange.
- Brug én animationsstil i et helt opslag eller en serie, og forskyd linjerne i stedet for at animere hvert ord forskelligt.

Til opslag på sociale medier klarer fire stilarter til **tekstanimation** næsten alt: **stig op** (ordene glider op og toner frem, roligt og eksklusivt), **pop** (ordene skalerer ind med et lille hop, kort og højlydt), **fej** (en linje afsløres fra den ene side som et tæppe) og **skrivemaskine** (bogstaverne kommer frem ét ad gangen, som om de skrives lige nu). Afstem stilen efter budskabet, hold hver entré under cirka tre kvart sekund, og hold så ordene stille længe nok til at læse dem to gange. Brug én stil pr. opslag. Det er det meste af håndværket.

## De fire tekstanimationer i overblik

| Animation | Føles | Brug den til | Entréens længde |
| --- | --- | --- | --- |
| Stig op | Rolig, selvsikker, eksklusiv | Overskrifter, lanceringer, citater, redaktionelle opslag | 400 til 700 ms |
| Pop | Energisk, legende, presserende | Priser, tilbud, kroge på ét ord, nedtællinger | 250 til 400 ms |
| Fej | Præcis, filmisk, afslørende | Overskrifter, afsløringer, før og efter | 500 til 800 ms |
| Skrivemaskine | Personlig, nysgerrig, i øjeblikket | Spørgsmål, citater, tips, bag om | 30 til 60 ms pr. bogstav |

Udgangspunkter for hver stil. Langsommere føles dyrere; hurtigere føles mere presserende. Går du for langt i begge retninger, holder folk op med at læse.

## Stig op: det sikre, eksklusive standardvalg

Stig op flytter hver linje et kort stykke opad, mens den toner frem, og lader den så falde på plads. Fordi bevægelsen er lille og bremser op, læser øjet ordene næsten i samme øjeblik, de begynder at dukke op. Det er det rigtige standardvalg for brands, der vil føles rolige: hoteller, studier, hudpleje, arkitektur, konsulenthuse.

Et stående opslag på sociale medier, der annoncerer en efterårskollektion, med overlinje, overskrift og detaljelinje

Et lanceringsopslag, der passer til stig op: først den lille overlinje, så overskriften, så detaljen, hver et slag efter den forrige.

Forskyd linjerne med cirka 100 til 150 millisekunder, så de falder som en kaskade. Forskyd kun ord på meget korte linjer; at forskyde bogstaver med stig op ser pjattet ud.

## Pop: til korte ord, der skal sidde

Pop skalerer et ord op fra en anelse mindre, skyder en smule over og falder til ro. Den har energi, så den passer til ord, du vil ramme med: en pris, en procentsats, »Udsolgt«, »I aften«, »Sidste dag«. Den fejler på lange sætninger, som vakler i stedet for at lande.

En lodret udsalgsstory med ordene Sidste dag i stor skrift og Slutter ved midnat nedenunder

To ord, der popper: korte, presserende, læst på et øjeblik.

## Fej: afslør en overskrift som et tæppe

Fej afdækker en linje fra den ene kant til den anden, så ordene dukker op i læserækkefølge uden at bevæge sig. Den føles bevidst og filmisk, og fordi selve bogstaverne bliver stående, er den en af de mest læsbare entréer. Brug den til overskrifter, til en »før«-linje, der fejes væk for at afsløre et »efter«, eller til et navn, der afsløres i slutningen af en video.

Fej i læseretningen: fra venstre mod højre for dansk og de fleste europæiske sprog. Et fej mod læseretningen føles, som om teksten bliver taget væk.

## Skrivemaskine: ord skrevet i øjeblikket

Skrivemaskine afslører bogstaverne ét ad gangen. Den er langsommere end de tre andre, og det er pointen: den får en linje til at føles personlig, som om nogen skriver til dig lige nu. Brug den til spørgsmål, korte citater, tips og noter fra bag om. Hold linjen kort, fordi hele sætningen skal være færdigskrevet, før folk kan læse den, og så skal den stadig have en pause.

En lodret story, der spørger Hvad skal vi bage på fredag, med plads nedenunder til en afstemning

Et spørgsmål passer til skrivemaskine: det føles skrevet af et menneske, live, til dig. Kort nok til at blive færdigskrevet på cirka et sekund.

> **Skrivemaskinens regnestykke** Ved 40 ms pr. bogstav tager en linje på 30 bogstaver 1,2 sekunder at skrive plus cirka to sekunders pause. En linje på femten ord løber over tre sekunder, før pausen overhovedet begynder, så skær ord væk, eller del dem over flere billeder.

## Sådan vælger du den rigtige tekstanimation

1. **Start med budskabet** Rolige nyheder stiger op. Presserende nyheder popper. En afsløring fejer. En personlig note skrives.
2. **Tæl ordene** Et til tre ord kan tage enhver stil. Lange linjer virker bedst med stig op eller fej; undgå pop og skrivemaskine.
3. **Vælg én stil pr. opslag** Blandede entréer i ét billede ligner en skabelon, der viser sig frem. Konsekvens er det, der får bevægelse til at føles som dit brand.
4. **Sæt pausen** Når det sidste ord er faldet på plads, så hold billedet længe nok til at læse det to gange. Stories går automatisk videre, så det betyder mest i [Instagram-stories](https://gradiently.design/da/guide/instagram-story-design).
5. **Se den uden lyd på en telefon** Sådan vil mange af dine seere se den. Er en linje svær at fange, så sæt tempoet ned, eller skær ord væk.

### Undgå

- En ny animation på hver linje
- Bogstaver, der snurrer, vender eller hopper igen og igen
- Tekst, der stadig bevæger sig, når storyen går videre
- Pop på en hel sætning
- Animeret tekst oven på en travl, hurtig video

### Gør

- Én stil til hele opslaget eller serien
- Én entré, derefter stilhed
- En tydelig pause før næste billede
- Pop på et til tre ord
- En rolig, langsomt bevægende baggrund under ordene

## Tekstanimationer i CSS, du kan kopiere

På et website kræver de samme fire stilarter få linjer CSS hver. Hold dem korte, kør dem én gang, og slå dem fra for folk, der foretrækker reduceret bevægelse.

```css
/* Transforms skip plain inline text: use these on block or inline-block elements */
.rise { animation: rise 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(0.4em); } }

.pop { animation: pop 320ms cubic-bezier(0.3, 1.5, 0.6, 1) both; }
@keyframes pop { from { opacity: 0; transform: scale(0.85); } }

.wipe { animation: wipe 700ms cubic-bezier(0.6, 0, 0.2, 1) both; }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.typewriter {
  font-family: ui-monospace, monospace; /* steps() needs equal letter widths */
  white-space: nowrap; overflow: hidden; width: 24ch;
  animation: type 1.2s steps(24) both;
}
@keyframes type { from { width: 0; } }

@media (prefers-reduced-motion: reduce) {
  .rise, .pop, .wipe, .typewriter { animation: none; }
}
```

Sæt skrivemaskinens bredde og trin til antallet af tegn i din linje. Til linjer i proportionale skrifter afslører du i stedet bogstav for bogstav med et lille script.

Kurverne betyder lige så meget som varighederne; [easing](https://gradiently.design/da/guide/easing) forklarer, hvorfor stig op skal bremse op, og pop skal skyde over. Det bredere håndværk med typografi i bevægelse finder du i [kinetisk typografi](https://gradiently.design/da/guide/variable-font-animation).

## Sådan animerer du tekst i Gradiently

Studio i Gradiently har de fire tekstanimationer, Stig op, Pop, Fej og Skrivemaskine, til ethvert tekstlag, over en Mark, der kan bevæge sig langsomt bag ordene. Marken holder sit roligste område under teksten, mens den bevæger sig, så linjerne forbliver læselige gennem hele animationen. Med Pro eksporterer du stories og Reels som GIF eller som MP4 eller WebM, hvor browseren understøtter optagelse. [Animerede Instagram-stories](https://gradiently.design/da/guide/animated-instagram-story) og [GIF vs. MP4](https://gradiently.design/da/guide/gif-vs-mp4) hjælper dig med at vælge format.

## FAQ

### Hvad er den bedste tekstanimation til Instagram-stories?

Stig op er det sikreste standardvalg til de fleste stories. Brug pop til korte, presserende ord, fej til afsløringer og skrivemaskine til spørgsmål eller personlige noter.

### Hvor længe skal en tekstanimation vare?

De fleste entréer læses godt mellem cirka 250 og 800 millisekunder, efterfulgt af en pause, der er lang nok til at læse linjen to gange.

### Hvordan laver jeg en skrivemaskineeffekt på tekst?

Afslør ét tegn ad gangen med cirka 30 til 60 millisekunder pr. bogstav. I CSS animerer du bredden af en linje i monospace med steps() lig med antallet af tegn.

### Skal jeg bruge forskellige tekstanimationer i ét opslag?

Som regel ikke. Én stil i et opslag, eller en hel serie, ser bevidst ud og føles som dit brand; blandede stilarter ser rodede ud.