kostenloser Webspace werbefrei: lima-city

Animation von DIV-Blöcken mit CSS

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   brainfolio

   brainfolio hat kostenlosen Webspace.

   11:50, 16.9.2012

   Hallo Leute,
   
   dumme Frage, aber kann man mithilfe von CSS DIV-Blöcke animieren, wobei die Animation beim klicken auf ein Element beginnt und es sich dann dreht oder verschiebt?
   
   Danke

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. theblanknotes

   theblanknotes hat kostenlosen Webspace.

   11:52, 16.9.2012

   Schau dir mal CSS3 transitions an. Funktioniert aber glaub nicht in IE.
   
   Beitrag zuletzt geändert: 16.9.2012 11:53:07 von theblanknotes
4. Autor dieses Themas

   brainfolio

   brainfolio hat kostenlosen Webspace.

   11:54, 16.9.2012

   und was mach ich dann bei IE?

5. imho

   

   imho hat kostenlosen Webspace.

   12:40, 16.9.2012

   CSS 3 Transitions und 3d Transforms nur einsetzen wenn dadurch Nutzern ältere Versionen des IE kein Nachteil entsteht, ab Version 10 kann der IE das auch. (siehe hier: http://caniuse.com/#feat=css-transitions)
   
   Sonst wirst du auf Javascript zurückgreifen müssen

6. g****e

   13:16, 16.9.2012

   Wenn du auf einen Klick reagieren willst, musst du sowieso mit Javascript die CSS3 Transition ansteuern.
   CSS:
   

   #mydiv 
   {
       width: 100px;
       transition: width 2s;
   }

   
   Javascript:
   

   document.getElementById( 'mydiv' ).onclick = function()
   {
       this.style.width = '500px';
   }

   
   Damit würdest du so eine Transition von 100 auf 500px in einer Zeit von 2Sekunden triggern. Der IE kann es wie erwähnt nicht, und von den anderen Browsern auch nur die aktuelleren.
   
   Liebe Grüße
7. Autor dieses Themas

   brainfolio

   brainfolio hat kostenlosen Webspace.

   13:23, 16.9.2012

   aber wenn ich es ohne Klicken sondern beim Drüberfahren sich verscheibt, dann sollte es gehen, oder?
   und kann ich auch mehrere Bewegungen nacheinander ausführen lassen, auch wenn ich nur einen aulöser hab (also zB ich fahr mit der Maus über ein Objekt und ein anderes bewegt sich daraufhin nach oben, dreht sich um 90° und bewegt sich dann nach links)?
   
   Vielen Vielen Dank

8. g****e

   13:46, 16.9.2012

   Wenn du mit Pseudoklassen arbeitest geht das. Dann verwendest du ein :hover, welches die Einstellungen ändert. Du kannst dann über die Einstellungen mittels "transition: all 2s", oder auch genauen angaben für was, die einzelnen Transitionen steuern. Einen Zeitversatz kriegst du mit transition-delay rein. Probier es aus, gehen tut es, und bringt viel Spaß :)
   
   Liebe Grüße

9. deviloperz

   deviloperz hat kostenlosen Webspace.

   8:49, 18.9.2012

   Wenn du das ganze nicht umbedingt per CSS machen willst würde ich die Tween/ TImelineMax ans Herz legen.
   Damit hast du die perfekte Kontrolle über jegliche Animation und kannst eben auch wie gewünscht Aktionen nacheinander ausführen, da du eine Timeline anlegen kannst.
   
   Schönen Gruß

10. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?