CSS pārejas (transitions) un animācijas ļauj veidot vienmērīgas vizuālas izmaiņas bez JavaScript. Pārejas aktivizējas, kad mainās elementa stāvoklis (piemēram, :hover), bet animācijas var darboties automātiski.

CSS pārejas (transition)

Pāreja nodrošina vienmērīgu pāreju starp diviem stāvokļiem:

.poga {
background: #3498db;
color: white;
padding: 12px 24px;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background 0.3s ease;
}

.poga:hover {
background: #2980b9;
}

Transition īpašības

/* Pilnā forma */
transition-property: background, transform; /* kuras īpašības animēt */
transition-duration: 0.3s; /* ilgums */
transition-timing-function: ease; /* ātruma līkne */
transition-delay: 0.1s; /* aizkave */

/* Saīsinātā forma */
transition: all 0.3s ease;
transition: background 0.3s ease, transform 0.2s ease-out;

Ātruma līknes: ease, linear, ease-in, ease-out, ease-in-out.

Transform — pārveidojumi

transform ļauj mainīt elementa formu, izmēru un pozīciju bez ietekmes uz citiem elementiem:

/* Palielināt */
transform: scale(1.1);

/* Pagriezt */
transform: rotate(45deg);

/* Pārvietot */
transform: translateX(20px);
transform: translateY(-10px);
transform: translate(20px, -10px);

/* Kombinēt */
transform: scale(1.05) translateY(-5px);

Piemērs: kartīte ar hover efektu

.kartite {
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.kartite:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

CSS animācijas (@keyframes)

Animācijas ļauj definēt sarežģītākas, daudzsoļu kustības:

@keyframes ielidot {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.elements {
animation: ielidot 0.5s ease-out;
}

Animation īpašības

animation-name: ielidot; /* animācijas nosaukums */
animation-duration: 0.5s; /* ilgums */
animation-timing-function: ease-out; /* ātruma līkne */
animation-delay: 0.2s; /* aizkave */
animation-iteration-count: infinite; /* atkārtojumu skaits */
animation-direction: alternate; /* virziens */

/* Saīsinātā forma */
animation: ielidot 0.5s ease-out 0.2s;

Piemērs: pulsējoša poga

@keyframes pulset {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}

.poga-pulsejoša {
animation: pulset 2s ease-in-out infinite;
}

Veiktspējas padomi

  • Animē tikai transform un opacity — tās neizraisa lapas pārzīmēšanu un darbojas ātri
  • Izvairies no width, height, margin animācijām — tās ir lēnas
  • Lieto will-change: transform priekš elementiem, kas tiks animēti