CSS animāciju ģenerātors

Interaktīvi veidojiet CSS @keyframes animācijas. Rediģējiet keyframe pieturas un īpašības, iestatiet ilgumu, laika funkciju, aizkavi — pēc tam kopējiet gatavo CSS.

Keyframes:

Stop position0%

CSS Properties

Animation name

Timing function

Duration1s

Delay0s

Iteration countinfinite

Infinite

Direction

Fill mode

Preview

Generated CSS

@keyframes myAnimation {
  0% {
    transform: rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: rotate(180deg);
    opacity: 0.5;
  }
  100% {
    transform: rotate(360deg);
    opacity: 1;
  }
}

.element {
  animation: myAnimation 1s ease 0s infinite normal none;
}

Buy me a coffee

Padomi un ieteikumi

Izmantojiet transform un opacity vienmērīgākām animācijām — tās neizraisa izkārtojuma pārrēķināšanu.
fill-mode: forwards saglabā elementu pēdējā keyframe stāvoklī pēc animācijas beigām.
alternate virziens atskaņo uz priekšu un atpakaļ — lieliski piemērots bezgalīgai cilpai bez lēcieniem.
cubic-bezier ļauj izveidot pielāgotu easing ārpus standarta priekšiestatījumiem.

Saistītie rīki

CSS Flexbox ģenerātors

Vizuāls flexbox spēļu laukums — konfigurē flex-direction, flex-wrap, justify-content, align-items un elementu rekvizītus.

CSS lodziņa ēnas ģenerātors

Vizuāli veido CSS lodziņa ēnas ar slaidēm. Vairāki ēnu slāņi, izplūšana, izplatība, krāsa un necaurredzamība.

CSS gradienta ģenerātors

Vizuāli veido skaistus CSS lineāros un radiālos gradientus. Pielāgo krāsas, pieturas un leņķi — kopē gatavo CSS.

CSS gradienta teksta ģenerātors

Izveido gradienta teksta efektus tiešsaistē. Izvēlas 2–4 krāsas, virzienu un kopē gatavo CSS background-clip kodu.

CSS mainīgo ģenerātors

Izveido pilnu CSS pielāgoto rekvizītu :root bloku krāsām, atstarpēm, tipografijai un apmales rādiusam.

CSS tīkla ģenerātors

Vizuāli veido CSS tīkla izkārtojumus. Konfigurē kolonnas, rindas, atstarpus un kopē ģenerēto CSS.

CSS apmales rādiusa ģenerātors

Vizuāli ģenerē border-radius CSS ar neatkarīgiem stūru vadīklām un tiešraides priekšskatījumu.

CSS teksta ēnas ģenerātors

Izveido slāņainus CSS teksta ēnu efektus ar tiešraides priekšskatījumu un viena klikšķa kopēšanu.

CSS filtra ģenerātors

Ģenerē CSS filtra efektus — izplūšanu, spilgtumu, kontrastu, krāsu rotāciju, piesātinājumu, sepiju un vairāk — ar attēlu priekšskatījumu.

CSS clip-path ģenerātors

Interaktīvi ģenerē CSS clip-path formas — poligonus, apļus un elipses — ar tiešraides priekšskatījumu. Velc vadīklas.