CSS Animation -generaattori

Luo CSS keyframe -animaatioita visuaalisesti reaaliaikaisella esikatselulla. Valitse esiasetuksista kuten bounce, pulse, shake, spin. Säädä kestoa, ajoitusta ja muuta. Kopioi CSS-koodi. Ilmainen verkkotyökalu.

Esikatselu

1.0s
0.0s

CSS-tuloste

 
 
  
 
Viite
  
Mitä ovat CSS-animaatiot?
 
CSS-animaatiot mahdollistavat CSS-ominaisuusarvojen välisten siirtymien animoinnin ajan kuluessa. Ne koostuvat kahdesta osasta: @keyframes-säännöistä, jotka määrittävät animaatiovaiheet, ja animation-ominaisuudesta, joka ohjaa ajoitusta, suuntaa ja toistoa.
 
Animaatioiden esiasetukset
 
Tämä työkalu sisältää yleisiä animaatioesiasetuksia: bounce (pystysuuntainen pomppiminen), pulse (skaalaus ylös ja alas), shake (vaakasuuntainen tärinä), spin (360° kierto), fadeIn/fadeOut (läpinäkyvyyssiirtymät), slideIn/slideOut (liuku sivulta), swing (heilurikierto) ja wobble (epäsymmetrinen tärinä).
 
Tietosuoja
 
Kaikki animaatioiden luonti tapahtuu 100 % selaimessasi. Mitään tietoja ei lähetetä palvelimelle.
  
    
    
 ← Takaisin kaikkiin työkaluihin