• Herzlich willkommen
  • Über mich
  • Artikelübersicht
  • Gaming
    • LittleBigPlanet: Die Geschichte von Sackboy
  • E-Mail für mich
  • Gästebuch
  • Impressum
  • Oben ↑
  • Veröffentlicht am 10. April 2011 / 9291 Leser / 4 Kommentare
    CSS Icon

    [CSS3] Spielereien mit “transition”

    Für mich eines der coolsten neuen CSS3-Features: die Eigenschaft “transition”. Damit erstellt ihr auf einfache Weise Animationen und Übergänge für HTML-Elemente, ohne das Javascript oder Flash-Animationen benötigt werden. Ich habe mal ein paar nette Beispiele zusammengestellt, die ihr euch auf der Demo-Seite anschauen könnt. Vielleicht ist ja auch für euch was dabei.

    Syntax

    .box {
    width:200px;
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: ease-in;
    }
    
    .box:hover {
    width:100px;
    }
    

    Shorthand

    .box {
    width:200px;
    transition: width 1s ease-in;
    }
    
    .box:hover {
    width:100px;
    }
    

    Browserunterstützung

    .box {
    -moz-transition: width 1s, height 2s, ease-in;
    -webkit-transition: width 1s, height 2s, ease-in;
    -o-transition: width 1s, height 2s, ease-in;
    transition: width 1s, height 2s, ease-in;
    }
    
    • Apple Safari 5+
    • Google Chrome 10+
    • Mozilla Firefox 4+
    • Opera 11.1+

    Beschreibung

    Fangen wir mit folgendem Beispiel an:

    .box {
    width:200px;
    height:100px;
    -moz-transition: width 1s, height 2s, ease-in;
    -webkit-transition: width 1s, height 2s, ease-in;
    -o-transition: width 1s, height 2s, ease-in;
    transition: width 1s, height 2s, ease-in;
    }
    
    .box:hover {
    width:100px;
    height:200px;
    }
    

    Wie ihr seht, geht transition Hand in Hand mit Pseudo-Klassen. Im Beispiel wird die Weite und Breite des Elements bei :hover angepasst. Dies erfolgt in einem Zeitfenster von 1 Sekunde für die Weite und 2 Sekunden in der Höhe. Als letzter Parameter wird die Art der Animation angegeben. Hier besteht die Wahl zwischen

    • ease
    • linear
    • ease-in
    • ease-out
    • ease-in-out
    • cubic-bezier

    Eine Erklärung spare ich mir mal an dieser Stelle, da die Unterschiede aus meiner Sicht eh marginal sind. Wer mehr darüber erfahren möchte, kann hier alles dazu nachlesen.

    Ein weiteres Beispiel:

    .box {
    background:#999;
    width:200px;
    height:100px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -moz-transition: all 0.5s linear;
    -webkit-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
    }
    
    .box:hover {
    background:#ccc;
    -moz-border-radius: 40px;
    border-radius: 40px;
    }
    

    Die Eigenschaft, die animiert werden soll, muss nicht explizit genannt sein. Mit der Angabe all können alle Eigenschaften, die mit der Pseudo-Klasse geändert werden, animiert werden. Im vorigen Beispiel erfolgt eine Anpassung der Hintergrundfarbe sowie der Ecken-Rundung innerhalb von 0,5 Sekunden.

    Transition kann aber nicht nur die Pseudo-Klasse :hover bedienen, sondern harmoniert beispielsweise auch mit :active oder :focus. In diesem Artikel habe ich das anhand einer Bildergalerie demonstriert. Einige sehr nette Ideen im Zusammenspiel mit Pseudo-Klassen findet ihr hier.

    Genug der Theorie. Lassen wir einfach Bilder sprechen. Seht euch die Demo-Seite mit Beispielen an.

    Demo ansehen

    Du suchst noch mehr zum Thema CSS3? Dann wirf einen Blick auf die Übersichtsseite:

    Übersicht CSS3
    Darf ich dir noch diese Artikel ans Herz legen?
    • [WordPress] Mehrere Sidebars nutzen vom 19. Mai 2012
    • [WordPress] Mein neues Theme ‘ZWEI’ vom 9. Mai 2012
    • [WordPress] ‘EINS’ – Mein erstes WordPress-Theme vom 23. April 2012
    • [CSS3] Ein horizontales Dropdown-Menü erstellen vom 18. April 2012
    • [CSS3] Die Pseudo-Klasse :target im Detail vom 12. April 2012
  • Twittern
  • Kategorien
  • Webdesign
  • Tags
  • css demo html internet tutorial
  • 4 Kommentare

    ↓ Kommentieren
    1. Axel sagt:
      3. August 2011 um 07:26

      Hallo!

      In der Demo mit dem Schatten:

      .box:hover {
      -moz-box-shadow: inset 3px 3px 10px #999;
      -webkit-box-shadow: inset 3px 3px 10px #999;
      box-shadow: inset 3px 3px 10px #999;
      }

      Muss da nicht -o-box-shadow für Opera stehen?
      Lg…

      Antworten
      • Olli sagt:
        3. August 2011 um 08:37

        Hallo Axel,

        Opera unterstützt ab Version 10.5 box-shadow. Genau wie für den IE 9 und die neuesten Versionen der Webkit-Browser sowie Firefox wird kein spezielles Browser-Präfix benötigt.

        Die Präfixe für Mozialla und Webkit-Browser stellen lediglich die Kompatibilität für ältere Versionen sicher.

        Gruß Olli

        Antworten
    2. Kasia sagt:
      27. Oktober 2011 um 16:12

      Hi Oli!
      Danke für die Zusammenstellung! :-)

      Antworten
    3. Nico sagt:
      9. März 2012 um 11:57

      Sehr gebräuchlich. Dankeschön.

      Antworten

    Dein Kommentar zu diesem Artikel

    Abbrechen





    Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

    «
    »

    Übersicht der Kategorien

  • Gaming
  • Grafik
  • Sicherheit
  • Sonstiges
  • Technik
  • Web
  • Webdesign
  • Übersicht der Schlagwörter

  • access
  • active directory
  • android
  • apple
  • atv
  • avatar
  • blu-ray
  • css
  • demo
  • divx
  • drm
  • dropbox
  • dsl
  • dvb
  • dyndns
  • e10
  • excel
  • facebook
  • fat32
  • fritzbox
  • fußball
  • galaxy s2
  • games
  • gif
  • gimp
  • google
  • guides
  • hannspad
  • hardware
  • hausmittel
  • hd
  • html
  • id3-tag
  • internet
  • ios
  • ipad
  • iphone
  • ipod
  • itunes
  • kennwort
  • lan
  • last.fm
  • lifestyle
  • littlebigplanet
  • marder
  • marketplace
  • medienfreigabe
  • modnation racers
  • mp3
  • musik
  • nas
  • nfl
  • ntfs
  • office
  • outlook
  • packers
  • partition
  • pdf
  • phishing
  • php
  • playstation 3
  • plugins
  • psn
  • psn id
  • remotedesktop
  • rss
  • sd
  • shopping
  • sim-lock
  • skin
  • spam
  • spielstand
  • sport
  • sql
  • steve jobs
  • tablet
  • theme
  • tutorial
  • tv
  • twonky media server
  • update
  • upnp
  • videos
  • vpn
  • wiedergabelisten
  • windows 7
  • windows media player
  • windows server
  • windows vista
  • wlan
  • word
  • wordpress
  • xbmc
  • xbox 360
  • xml
  • xoom
  • zip
    • Hallo, ich bin Olli. Herzlich willkommen auf meiner Webseite.

      Schön dich zu sehen

      Du findest hier jede Menge Informationen zu den Themen

      • WordPress und WordPress-Themes
      • Webdesign
      • Gaming
      • Grafikdesign
      • Technik
      • und vielen anderen...

      Schau dich in aller Ruhe um. Ich wünsche dir viel Spass beim Stöbern.

      Lust auf ein neues WordPress-Theme?

      WordPress-Themes

      Einige zufällig ausgewählte Artikel (nur für dich):

      • [WordPress] WP-SpamFree Plugin – Endlich spamfrei bloggen vom 19. Mai 2010
      • [WordPress] WP-Newsticker Plugin vom 13. Mai 2010
      • Die Vollendung meines Selbstbau-NAS vom 29. Juli 2010
      • [Gimp] Innen-Schatten (invertierter Schatten) erstellen vom 6. August 2010
      • Zugriff auf Webserver für hartnäckige Spammer blockieren vom 27. Juni 2010

      Die letzten Kommentare:

      • Christian hat am 18.05.2012 den Artikel [XBMC] Der ultimative Einsteiger-Guide - Teil 1 kommentiert
      • Christian hat am 17.05.2012 den Artikel [XBMC] Der ultimative Einsteiger-Guide - Teil 1 kommentiert
      • Olli hat am 17.05.2012 den Artikel [XBMC] Der ultimative Einsteiger-Guide - Teil 1 kommentiert
      • Christian hat am 17.05.2012 den Artikel [XBMC] Der ultimative Einsteiger-Guide - Teil 1 kommentiert

      Hier habe ich noch einige interessante Links für dich:

      • Meine Blu-ray-Sammlung
      • Olli on BluLife
      • Olli on Facebook
      • Olli on Google+
      • Olli on last.fm
      • Olli on lbp.me
      • Olli on twitter
      • Olli on YouTube

      Und noch was für die Schnäppchenjäger:

      • abstauben24
      • Blu-ray Preisradar für Amazon
      • Chillmo
      • DVD Tiefpreis
      • myDealZ.de
      • myliveshopping.de
      • Preisfieber
      • Preisjäger
      • Schnäppchen mit Reichweite
      • Schnäppchenfuchs
      • Schnappen4u
      • Schotendealz

      Meine persönlichen Favoriten:

      • BENM.AT
      • CSS-Tricks
      • Engadget Deutschland
      • Hifi Forum
      • ifun.de
      • Smartdroid
      • Smashing Magazine
      • Winfuture.de
    • Olli on twitter
    • Olli on Facebook
    • Olli on Google+
    • Olli on last.fm
    • Olli on YouTube
    • RSS

    Seitenanfang ↑

    Hier wird seit 937 Tagen gebloggt | 235 hilfreiche Artikel | 277 liebevolle Kommentare

    176,885 Besucher gesamt | 2 Besucher online

    Artikel RSS-Feed | Kommentar RSS-Feed | Anmelden »

    © olivergast.de ist made in Germany und wird angetrieben von Wordpress

    Theme 'ZWEI' (modified) von Oliver Gast