Vefforritun 1 kennd haustið 2025
transition og animation eigindunum/*
transition:
prop duration timing-function delay
*/
transition: color 250ms linear 0;
,all en það breytir öllum eigindum, getur valdið hægagangi og ættum ekki að gera
linear, hröðun er línulegease, sjálfgefið gildi fyrir þau eigindi sem nota hröðun, mikil hröðun í byrjun, hægir síðan á sér og kemur rólega í markease-in, byrjar hægt en eykur hröðun eftir því sem endi nálgastease-in-out, byrjar hægt, eykur hraða en hægir aftur á sér þegar endi nálgastease-out, byrjar hratt en hægir á sér þegar endi nálgast
Línuleg hröðun með linear lykilorði.

Hröðun með ease-in-out lykilorði.
animation eigindinu getum við útbúið flóknari hreyfingar án þess að nota JavaScript@keyframes at-reglunnifrom, to) eða prósentugildi sem „selectorar“ innan keyframes@keyframes fade {
/* hreyfing í 0% => opacity: 1 */
from { opacity: 1; }
/* hreyfing í 50% => opacity: 0.4 */
50% { opacity: 0.4; }
/* hreyfing í 100% => opacity: 0 */
to { opacity: 0; }
}
animation shorthand eða viðgeigandi gildum/* animation: duration | name | timing */
animation: 3s fade ease-in;
Dæmi um animation sem hreyfir texta
animation til að útbúa þrvítt spjald
transform eigindinu getum við gert breytingar á tvívíðu og þrívíðu rúmi hluta
translate, rotate, skew og scalepositiontransform: translateY(-100px);transform: rotate(90deg);transform: scale(1.2);perspective: <tala>; skilgreinir hversu langt frá núllpunkt z-áss við horfumnone, þurfum að skilgreina ef við erum að vinna með þrívíð formAðeins breyta opacity og transform þegar við hreyfum hluti til að halda 60fps