CSS animāciju un efektu špikeris /cheat sheet

Transform iestatījums

transform: transform function-values

Piemērs:

.sample-class {
    transform: rotate(60deg);
}
Keyword-value type: none
.sample-class {
    transform: none;
}

Function-value type: matrix() 

Variations: matrix(), matrix3d()

.sample-class {
     transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
}

Function-value type: rotate(deg)

Variations: rotate(), rotate3d(), rotateX(), rotate(), rotateZ()

.sample-class {
    transform: rotate3d(3,2,1, 100deg);
}
Piezīme: rotate3d() attiecīgās vērtības apzīmē x, y, z koordinātu un rotācijas pakāpi

Function-value type: translate(x,y)

Variations: translate(), translate3d(), translateX(), translateY(), translateZ()

.sample-class {
    transform: translate3d(10px, 20px, 30px);
}
Piezīme. Translate3d() attiecīgās vērtības atspoguļo tulkojumu pa x, y, z koordinātām

Function-value type: scale(factor)

Variations: scale(), scale3d(), scaleX(), scaleY(), scaleZ()

.sample-class {
    transform: scale3d(2, 1, 0.3);
}
Piezīme: scale3d() attiecīgās vērtības atspoguļo mērogošanas laikus pa x, y, z koordinātām

Function-value type: skew(deg, deg)

Variations: skew(), skewX(), skewY()

.sample-class {
    transform: skew(100deg);
}

GLOBĀLIE VĒRTĪBU TIPI:

.sample-class {
    transform: inherit;
}
.sample-class {
    transform: initial;
}
.sample-class {
    transform: revert;
}
.sample-class {
    transform: revert-layer;
}
.sample-class {
    transform: unset;
}

Vairāki pārveidojumi vienā elementā

Sintakse

Transformāciju var lietot rotate(), scale() un translate(), kuras var uzskaitīt kopā. Katram no šiem iestatījumiem var būt savas vērtības, un darbības radīs kombinētu efektu.

.sample-class {
    transform: rotate(45deg) scale(1.5) translate(45px);
}

Papildu rekvizīts transformācijā: transform-origin

Nosaka transformācijas centrēšanas enkura punktu.

Piemēri:

.sample-class {
    transform-origin: 10px 10px;
}
.sample-class {
    transform-origin: right bottom;
}

Pārejas iestatījums

Pārejas īsāks pieraksts:

Pārejas īsajā pierakstā ir četri šādi apakšrekvizīti, no kuriem katru var arī definēt atsevišķi.

  • pārejas / transition-property
  • pārejas ilgums / transition-duration
  • pārejas laika funkcija / transition-timing-function
  • pārejas aizkave / transition-delay

Vērtības ir jāuzskaita, nenosaucot tās atsevišķi. Izlaistajām vērtībām tiks piešķirtas to noklusējuma vērtības.

Sintakse

transition: rekvizītu ilgums laika funkcijas aizkave;

Piemērs

transition: margin-left2s easy-in-out 0,5s;

Animācijas un @keyframes

animācijas iestatījums:
Sintakse
animācija:nosaukuma ilgums laiks-funkcijas aizkave iterācija-skaitīšanas virziens aizpildīšanas režīms atskaņošanas stāvoklis;

( animation: name duration timing-function delay iteration-count direction fill-mode play-state; )

.sample-class {
    animation: none 2 ease 0.5 4 normal none running;
}
Animācijas rekvizīts ir tālāk norādīto apakšrekvizītu saīsinājums.
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state

Vērtībām, kas nav minētas, tiek dotas noklusējuma vērtības.

Animācijas nosaukuma rekvizīts tiek izmantots, lai piesaistītu kārtulu @keyframes.

Sintakse:

@keyframes mymove {
  from {property: value}
  to { property: value }
}

Piemērs:

@keyframes animation-name {
    from {bottom: 0px;}
    to {bottom: 100px;}
}

Procenti apzīmē animācijas laiku.

@keyframes animācijas nosaukums {
/* šeit deklarē darbības */
}
Piemērs:
@keyframes animation-name {
    0%,100%{
        background-color: blue;
    }
    50% {
        background-color: green;
    }
}

Vairākas animācijas

Darbojas tāpat kā parastā animācija, var iestatīt vairākus noteikumus.
#some-class{
    animation: animation-a 2s linear infinite alternate, 
        animation-b 3s ease infinite alternate;
}  

Loading

Noderīgs raksts? Dalies ar citiem:
Dalīties: