# Tekstianimaatiot: nousu, ponnahdus, pyyhkäisy, kirjoituskone

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

Et tarvitse viittäkymmentä tehostetta. Neljä hyvin valittua ja ajoitettua saapumistapaa hoitaa tarinat, Reels-videot, ilmoitukset ja sitaatit. Näin valitset oikean tilanteeseen.

## The short version

- Nousu, ponnahdus, pyyhkäisy ja kirjoituskone ovat neljä tekstianimaatiota, jotka kattavat useimmat somejulkaisut.
- Nousu sopii rauhallisiin, arvokkaisiin ja toimituksellisiin viesteihin; ponnahdus lyhyisiin, energisiin sanoihin, kuten hintoihin ja tarjouksiin.
- Pyyhkäisy paljastaa rivin kuin verho ja toimii otsikoissa sekä ennen ja jälkeen -paljastuksissa. Kirjoituskone sopii sitaatteihin, kysymyksiin ja kaikkeen, jonka pitäisi tuntua juuri kirjoitetulta.
- Useimmat saapumisanimaatiot ovat luettavimmillaan noin neljännessekunnista kolmeen neljäsosasekuntiin, minkä jälkeen rivi pidetään paikallaan kahden lukukerran ajan.
- Käytä yhtä animaatiotyyliä koko julkaisussa tai sarjassa ja porrasta rivejä sen sijaan, että animoisit jokaisen sanan eri tavalla.

Somessa neljä **tekstianimaatiota** tekee lähes kaiken: **nousu** (sanat liukuvat ylös ja ilmestyvät pehmeästi, rauhallinen ja arvokas), **ponnahdus** (sanat suurenevat näkyviin pienellä pompulla, lyhyt ja voimakas), **pyyhkäisy** (rivi paljastuu yhdestä reunasta kuin verho) ja **kirjoituskone** (kirjaimet ilmestyvät yksi kerrallaan kuin juuri kirjoitettuina). Sovita tyyli viestiin, pidä saapuminen alle noin kolmen neljäsosasekunnin mittaisena ja jätä teksti sitten paikalleen kahden lukukerran ajaksi. Käytä yhtä tyyliä julkaisua kohti. Siinä on suurin osa taidosta.

## Neljä tekstianimaatiota yhdellä silmäyksellä

| Animaatio | Tunnelma | Käyttö | Saapumisen kesto |
| --- | --- | --- | --- |
| Nousu | Rauhallinen, itsevarma, arvokas | Otsikot, lanseeraukset, sitaatit, toimitukselliset julkaisut | 400:sta 700 millisekuntiin |
| Ponnahdus | Energinen, leikkisä, kiireinen | Hinnat, tarjoukset, yhden sanan koukut, lähtölaskennat | 250:stä 400 millisekuntiin |
| Pyyhkäisy | Täsmällinen, elokuvallinen, paljastava | Otsikot, paljastukset, ennen ja jälkeen | 500:sta 800 millisekuntiin |
| Kirjoituskone | Henkilökohtainen, utelias, hetkessä elävä | Kysymykset, sitaatit, vinkit, kulissien takaiset sisällöt | 30:stä 60 millisekuntiin kirjainta kohti |

Lähtökohdat jokaiselle tyylille. Hitaampi tuntuu arvokkaammalta, nopeampi kiireisemmältä. Jos menet kumpaankin suuntaan liian pitkälle, lukeminen lakkaa.

## Nousu: turvallinen ja arvokas oletus

Nousu siirtää jokaista riviä hieman ylöspäin samalla kun se ilmestyy näkyviin, ja antaa sen sitten asettua. Koska liike on pieni ja hidastuu, silmä lukee sanat lähes heti niiden ilmestyessä. Tämä on sopiva oletus rauhallisuutta tavoitteleville brändeille: hotelleille, studioille, ihonhoidolle, arkkitehtuurille ja konsulttitoimistoille.

Pystysuuntainen somejulkaisu syysmallistosta, jossa on yläteksti, otsikko ja lisätietorivi

Nousuun sopiva lanseerausjulkaisu: ensin yläteksti, sitten otsikko ja lopuksi lisätieto, kukin hetki edellisen jälkeen.

Porrasta rivit noin 100:sta 150 millisekuntiin, jotta ne ilmestyvät peräkkäin. Porrasta sanoja vain hyvin lyhyillä riveillä. Kirjainten porrastus nousutehosteessa näyttää levottomalta.

## Ponnahdus: lyhyille sanoille, joiden pitää osua

Ponnahdus suurentaa sanan hieman pienemmästä koosta, ylittää tavoitekoon vähän ja asettuu. Siinä on energiaa, joten se sopii iskeviin sanoihin: hinta, prosentti, ”Loppuunmyyty”, ”Tänään”, ”Viimeinen päivä”. Pitkissä lauseissa se ei toimi, sillä ne heiluvat iskevyyden sijaan.

Pystysuuntainen aletarina, jossa Viimeinen päivä on suurena ja Päättyy keskiyöllä sen alla

Kaksi ponnahtavaa sanaa: lyhyet, kiireiset ja hetkessä luettavat.

## Pyyhkäisy: paljasta otsikko kuin verho

Pyyhkäisy paljastaa rivin reunasta toiseen. Sanat ilmestyvät lukujärjestyksessä liikkumatta. Se tuntuu harkitulta ja elokuvalliselta. Kirjaimet pysyvät paikoillaan, joten se on yksi luettavimmista saapumistavoista. Käytä otsikoihin, ”ennen”-riville, joka pyyhkiytyy pois ”jälkeen”-rivin tieltä, tai videon lopussa paljastuvaan nimeen.

Pyyhkäise lukusuuntaan: vasemmalta oikealle englannissa ja useimmissa eurooppalaisissa kielissä. Vastakkaiseen suuntaan tehty pyyhkäisy tuntuu tekstin poistamiselta.

## Kirjoituskone: sanat syntyvät tässä hetkessä

Kirjoituskone paljastaa kirjaimet yksi kerrallaan. Se on muita kolmea hitaampi, ja juuri se on tarkoitus: rivi tuntuu henkilökohtaiselta, kuin joku kirjoittaisi sinulle nyt. Käytä kysymyksiin, lyhyisiin sitaatteihin, vinkkeihin ja kulissien takaisiin huomioihin. Pidä rivi lyhyenä, sillä lauseen on valmistuttava ennen kuin sen voi lukea. Sen jälkeen tarvitaan vielä paikallaanoloaikaa.

Pystysuuntainen tarina, jossa kysytään Mitä leipoisimme perjantaina ja jonka alapuolella on tilaa kyselylle

Kysymys sopii kirjoituskoneeseen: se tuntuu ihmisen juuri sinulle kirjoittamalta. Riittävän lyhyt valmistuakseen noin sekunnissa.

> **Kirjoituskoneen ajoituslaskelma** Kun kirjaimen kesto on 40 ms, 30 kirjaimen rivin kirjoittaminen kestää 1,2 sekuntia, minkä jälkeen tarvitaan noin kaksi sekuntia paikallaanoloa. Viidentoista sanan rivi ylittää kolme sekuntia jo ennen paikallaanoloa. Karsi siis sanoja tai jaa ne eri ruutuihin.

## Oikean tekstianimaation valinta

1. **Aloita viestistä** Rauhallinen uutinen nousee. Kiireinen uutinen ponnahtaa. Paljastus pyyhkäisee. Henkilökohtainen viesti kirjoittuu.
2. **Laske sanat** Yhdestä kolmeen sanaa sopii mihin tahansa tyyliin. Pitkät rivit toimivat parhaiten nousulla tai pyyhkäisyllä. Vältä ponnahdusta ja kirjoituskonetta.
3. **Valitse yksi tyyli julkaisua kohti** Saapumistyylien sekoittaminen samassa ruudussa näyttää tehosteilla esittelevältä mallipohjalta. Yhtenäisyys tekee liikkeestä brändin mukaista.
4. **Aseta paikallaanoloaika** Kun viimeinen sana asettuu, pidä ruutu paikallaan kahden lukukerran ajan. Tarinat etenevät automaattisesti, joten tämä on erityisen tärkeää [Instagram-tarinoissa](https://gradiently.design/fi/guide/instagram-story-design).
5. **Katso puhelimella ilman ääntä** Moni katsojasi näkee sen juuri niin. Jos jokin rivi on vaikea ehtiä lukea, hidasta tai karsi sanoja.

### Vältä

- Eri animaatio joka rivillä
- Kirjaimet, jotka pyörivät, kääntyvät tai pomppivat toistuvasti
- Teksti liikkeessä vielä tarinan vaihtuessa
- Ponnahdus kokonaisessa lauseessa
- Animoitu teksti vilkkaan, nopean videon päällä

### Tee näin

- Yksi tyyli koko julkaisuun tai sarjaan
- Yksi saapuminen, sitten paikallaanolo
- Selkeä pysähdys ennen seuraavaa ruutua
- Ponnahdus yhdestä kolmeen sanaan
- Rauhallinen, hitaasti liikkuva tausta tekstin alla

## Kopioitavat CSS-tekstianimaatiot

Verkkosivulla samat neljä tyyliä onnistuvat kukin muutamalla CSS-rivillä. Pidä ne lyhyinä, toista vain kerran ja poista käytöstä ihmisiltä, jotka suosivat vähennettyä liikettä.

```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; }
}
```

Aseta kirjoituskoneen leveys ja askelten määrä rivisi merkkimäärään. Vaihtelevan merkkileveyden fonteissa paljasta kirjaimet yksi kerrallaan pienellä skriptillä.

Liikekäyrät merkitsevät yhtä paljon kuin kestot. [Liikkeen pehmennys](https://gradiently.design/fi/guide/easing) selittää, miksi nousun pitäisi hidastua ja ponnahduksen ylittää tavoite hieman. Liikkuvan typografian laajempaa taitoa käsittelee [kineettinen typografia](https://gradiently.design/fi/guide/variable-font-animation).

## Tekstin animointi Gradientlyssä

Gradientlyn Studiossa nämä neljä tekstianimaatiota, Nousu, Ponnahdus, Pyyhkäisy ja Kirjoituskone, ovat käytettävissä kaikille tekstitasoille. Taustalla voi liikkua hitaasti Mark. Mark pitää rauhallisimman alueensa tekstin alla liikkuessaan, joten rivit pysyvät luettavina koko animaation ajan. Prolla viet tarinat ja Reels-videot GIF-muodossa tai MP4- ja WebM-muodossa selaimen tukiessa tallennusta. [Animoidut Instagram-tarinat](https://gradiently.design/fi/guide/animated-instagram-story) ja [GIF vai MP4](https://gradiently.design/fi/guide/gif-vs-mp4) auttavat tiedostomuodon valinnassa.

## FAQ

### Mikä tekstianimaatio sopii parhaiten Instagram-tarinoihin?

Nousu on turvallisin oletus useimpiin tarinoihin. Käytä ponnahdusta lyhyisiin kiireisiin sanoihin, pyyhkäisyä paljastuksiin ja kirjoituskonetta kysymyksiin tai henkilökohtaisiin viesteihin.

### Kuinka kauan tekstianimaation pitäisi kestää?

Useimmat saapumiset ovat helposti luettavia noin 250:stä 800 millisekuntiin, minkä jälkeen rivi pidetään paikallaan kahden lukukerran ajan.

### Miten teen kirjoituskone-tekstitehosteen?

Paljasta yksi merkki kerrallaan noin 30:stä 60 millisekuntiin kirjainta kohti. Animoi CSS:ssä tasalevyisen rivin leveyttä steps()-funktiolla, jonka askelmäärä vastaa merkkimäärää.

### Pitäisikö yhdessä julkaisussa käyttää eri tekstianimaatioita?

Yleensä ei. Yksi tyyli julkaisussa tai koko sarjassa näyttää harkitulta ja brändin mukaiselta. Tyylien sekoittaminen näyttää levottomalta.