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;
}
předem děkuji za radu.
Chamurappi
Profil
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
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
kalina:
Pri splnení podmienky prvku triedu pridáš resp. ju vymeníš za takú, ktorá bude obsahovať práve požadovanú animáciu.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: