CSS animāciju un efektu špikeris /cheat sheet
Transform iestatījums
transform: transform function-values
Piemērs:
.sample-class {
transform: rotate(60deg);
}
.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;
}
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 */
}
@keyframes animation-name {
0%,100%{
background-color: blue;
}
50% {
background-color: green;
}
}
Vairākas animācijas
#some-class{
animation: animation-a 2s linear infinite alternate,
animation-b 3s ease infinite alternate;
}
Atbildēt
Lai komentētu, jums jāpiesakās sistēmā.