| Autor | Zpráva | ||
|---|---|---|---|
| kalina Profil |
prosím o radu: zkoušela jsem si různou animaci pro více divů, ale protože nevím, jak zadat správně identifikátor pro @keyframes wait animují se mi všechny divy stejně. Chtěla bych, aby se některé divy otáčely vždy doleva a některé vždy doprava, tj. alternate se nehodí. Když jsem měla u jednotlivých divů @keyframes wait nastavený pro směr otáčení jednou jako -360deg a podruhé jako 360deg, tak to nehrálo žádnou roli, otáčely se vždy jen podle jednoho, (toho, který byl definovaný v css níž) Tj. předpokládám, že mi chybí identifikátor, kterým bych @keyframes wait pro jednotlivé divy odlišila: Náhled kodu:
#raketa{
position: absolute;
left:300px;
background-color:transparent;
width: 700px;
height: auto;
animation: wait 5s linear 0s infinite alternate;
}
@keyframes wait{
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
#kvet {
position:absolute;
left:300px;
top:20px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 60px;
border-color: red;
border-radius: 50%;
animation: wait 2s linear 0s infinite normal;
}
@keyframes wait {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#tecky {
position:absolute;
top:250px;
left:800px;
height: 250px;
width: 200px;
border: 1px dashed red;
background-color: transparent;
border-radius: 50%;
border-top-width: 1px;
animation: wait 4s linear 0s infinite normal;
} |
||
| Chamurappi Profil |
#2 · Zasláno: 26. 2. 2017, 01:30:34
Reaguji na kalinu:
„Tj. předpokládám, že mi chybí identifikátor, kterým bych @keyframes wait pro jednotlivé divy odlišila“ Identifikátorem je právě to slovo wait. První hodnota v animation je název animace a v bloku @keyframes název {} je popis animace.
|
||
| kalina Profil |
Chamurappi:
Díky moc! animation jsem si odněkud naslepo zkopírovala a wait jsem považovala za funkci, k níž se vztahuje hodnota 5s. Takže ještě jednou moc díky a jdu si animation pořádně prostudovat. |
||
| kalina Profil |
#4 · Zasláno: 28. 2. 2017, 20:41:55
Chamurappi:
chtěla bych ještě poprosit, jak bych mohla "opodmínkovat" @keyframes ve formuláři viz. níže, nebo spíš vůbec jak jej tam funkčně začlenit, tak, aby se po splnění nějaké podmínky, třeba x==a-b, změnil směr otáčení? Předem moc děkuji za radu. <SCRIPT>
function Leti() {
var a,b,x,y,f;
f = document.sputnik;
a = parseInt(document.sputnik.cislo1.value);
b = parseInt(document.sputnik.cislo2.value);
x = parseInt(document.sputnik.vysledek1.value);
f.vysledek2.value=a-b;
f.cislo1.style.backgroundImage='url(vzorek.gif)';
y = parseInt(document.sputnik.vysledek2.value);
if ( a==19 && b==10 && x==a-b) {
f.vysledek3.value='správně výpočet i zadání' ;
$("#galaxy")
.css("top","250px");
pokracovat = true;
}
if ( a!=19 || b!=10 && x==a-b) {
f.vysledek3.value='výpočet správně, ale špatně zapsané' ;
$("#kvet")
.css("transition","1s")
.css("left","50px");
pokracovat = true;
}
if ( a!=19 && b!=10 && x==a-b) {
f.vysledek3.value='výpočet správně, ale špatně zapsané' ;
$("#kvet")
.css("transition","1s")
.css("left","500px");
pokracovat = true;
}
if (x!=a-b) {
f.vysledek_3.value='zkus to znovu' ;
$("#kvet")
.css("top","200px");
pokracovat = true;
}}
</SCRIPT> |
||
| Tomáš123 Profil |
#5 · Zasláno: 28. 2. 2017, 22:00:30
kalina:
Pri splnení podmienky prvku triedu pridáš resp. ju vymeníš za takú, ktorá bude obsahovať práve požadovanú animáciu. |
||
|
Časová prodleva: 7 let
|
|||
0