Jaro 2021, Praha
4. května 2021
https://github.com/tvorimweb-2021-praha-jaro/lekce_08
- Naučit se CSS transformace a předchody (transitions)
- Seznámit se s tvorbou animací pomocí CSS
- transform = změna tvaru elementu
- transition = animace přechodu mezi stavy elementu
CSS vlastnost transform
s hodnotami například:
translate(x, y)
scale(x, y)
rotate(deg)
skew(deg)
- ...
/* Zkosení */
.skew {
transform: skew(-15deg);
}
/* Otočení */
.rotate {
transform: rotate(-15deg);
}
note:
- jendotka deg = úhel ve stupních
- https://developer.mozilla.org/en-US/docs/Web/CSS/angle
/* Posun */
.translate {
transform: translate(0, 50%);
}
/* Změna velikosti */
.scale {
transform: scale(1.5);
}
CSS vlastnost transition
:
<property> <duration> <easing> <delay>
property
: vlastnost, na kterou setransition
vstahuje, prázdná znamená všechnyduration
: délka přechodu (v ms)easing
: křivka hodnot v časedelay
: zpoždění animace (v ms)
button {
background-color: blue;
transition: 300ms;
}
button:hover {
background-color: red;
}
div {
/* co se bude animovat */
transition-property: margin, height, ...;
/* jakým způsobem se bude animovat */
transition-timing-function: ease | linear |...;
}
note:
div {
/* jak dlouho bude animace probíhat */
transition-duration: 500ms | 0.5s;
/* jak dlouho se počká než začne průběh */
transition-delay: 500ms | 0.5s;
}
element {
transition: ([transition-property]) [transition-duration]
([transition-timing-function]) ([transition-delay]);
}
div {
margin-top: 100px;
transition: margin-top 300ms ease 1s;
}
div:hover {
margin-top: 200px;
}
note:
https://css-tricks.com/almanac/properties/t/transition-timing-function/
- CSS vlastnost
animation
:nazev-animace delka [pocet opakovani] [smer] [fillmode]
animation-iteration-count
- počet opakování neboinfinite
animation-direction
-normal
,reverse
,alternate
animation-fill-mode
-none
,forwards
,backwards
, ...@keyframes nazev-animace
from { vychozi stav }
to { cilovy stav }
X% { stav v daném procentu animace }
.icon {
animation-name: spin; /* název shodný s názvem za @keyframes */
animation-duration: 2s; /* trvání animace */
animation-iteration-count: infinite; /* počet opakování */
animation-timing-function: linear; /* průběh animace */
}
@keyframes spin {
from {
/* výchozí stav prvku */
}
to {
/* koncový stav prvku */
}
}
- Zadaný v classrooms
- Ukážeme si co je třeba