Animation mit CSS

[Saheeda]

Hallo,

auf der Seite Codecadamy gibt es als Übungsaufgabe ein Sonnensystem, das mit CSS animiert werden soll.

Die Lösung dafür lautet:

@-webkit-keyframes spin-right {

  100% {

    -webkit-transform: rotate(360deg);

       -moz-transform: rotate(360deg);

        -ms-transform: rotate(360deg);

         -o-transform: rotate(360deg);

            transform: rotate(360deg);

  }

}


@keyframes spin-right {

  100% {

    -webkit-transform: rotate(360deg);

       -moz-transform: rotate(360deg);

        -ms-transform: rotate(360deg);

         -o-transform: rotate(360deg);

            transform: rotate(360deg);

  }

}

Ich kanns nur nicht so richtig nachvollziehen.

Dank Google weiß ich jetzt zumindest, dass -webkit-, -moz-, -ms- und -o- für die verschiedenen Browser stehen.

1. Aber warum zweimal (fast) derselbe Code? Die Animation läuft auch ohne den zweiten Block durch.

2. Was bewirken die 100%?

Bei 100% läufts flüssig durch.

Bei 50% "pendelt" der Kreis, dreht sich also einmal komplett und wieder zurück.

Bei 25% drehts sich einmal schnell um 360° und anschließend langsam wieder zurück.

Ich sehe aber irgendwie kein Muster...

Danke!

[Saheeda]

EDIT hat mich grad auf noch n Problem aufmerksam gemacht:

Ich möchte, dass die Größe der einzelnen divs per Mausklick geändert werden kann. Meine Idee:

<script>


function setDimensions(height,width) {


 document.getElementById("sun").style.height=height;

 document.getElementById("sun").style.width=width;


}

</script>



<input type="button" value="Größer"

 onClick="setDimensions('+20px','+20px');">      

Ich kann so zwar die Größe absolut verändern (also auf 200, 300px etc) festlegen, aber nicht langsam in z.B. 20-px-Schritten wachsen lassen. (Unanimiert, auf Knopfdruck). Ich habs mit und ohne Gänsefüßchen probiert, mit und ohne "px", mit ner zweiten Variable dazwischen... Mir gehen grad die Ideen aus, was noch gehen könnte...

Danke!

[Memento]

Guten Morgen,

zum ersten : Das macht für mich keinen Sinn... denn das -webkit-keyframes bezieht sich ja auf die Webkit-Browser (Safari und ältere Chrome Versionen). Darin dann auch auf -ms- und -o- abzufragen ist dead code.

Ich weiss allerdings nicht, ob die Webkit-Browser mit einem normalen 'keyframes' zurechtkommen. Kann dies leider gerade nicht testen.

Dein zweites Problem ist sehr einfach: Du setzt nie die Dimensionen auf x+20px sondern immer auf +20px.

Versuch folgendes:

<script>


function setDimensions(in_hoehe,in_weite) {

    var i_height = (document.getElementById("sun").style.height + in_hoehe)+'px';

    var i_width  = (document.getElementById("sun").style.width  + in_weite) +'px';


   document.getElementById("sun").style.height = i_height; 

   document.getElementById("sun").style.width  = i_width;


}

</script>



<input type="button" value="Größer"

 onClick="setDimensions(20,20);">

[Saheeda]

Hallo Memento,

hm, irgendwie funktioniert das auch nicht so, wie ich das möchte.

Egal, ob ichs mit oder ohne Pluszeichen probiere, die Werte werden einmalig festgelegt und verändern sich auch durch wiederholtes Klicken nicht mehr...

[Memento]

Hallo Saheeda,

entschuldige.. ich hab da einen Fehler gemacht... Der Ausdruck 'document.getElementById("sun").style.height' liefert einen Wert mit Einheit.. also z.B.: 120px - oder einfach einen leeren String.

Die Lösung: Auf Offset wechseln!

<script>


function setDimensions(in_hoehe,in_weite) {

    var i_height = (document.getElementById("sun").offsetHeight + in_hoehe) + 'px';

    var i_width  = (document.getElementById("sun").offsetWidth  + in_weite) +'px';


   document.getElementById("sun").style.height = i_height; 

   document.getElementById("sun").style.width  = i_width;


}

</script>



<input type="button" value="Größer"

 onClick="setDimensions(20,20);">

Bearbeitet 10. Juni 2014 von Memento