CSS3 transitions – CSS Animation – CSS3 Adventskalender Tag 21

CSS3 Transitions und CSS3 Animations sind ein sehr umfassendes Thema, mit dem man glatt noch einen Monat füllen könnte. Gleichzeitig revolutiert es CSS, da zukünftig Animationen und Elementveränderungen ohne Javascript möglich sind. Zum Einstieg werde ich ein kleines Beispiel für CSS3 Transitions zeigen.

Transitions-Eigenschaften

transition-property
welche Eigenschaft wird verändert, z.B. background-color, opacity, … oder all – also alle Eigenschaften gleichzeitig
transition-duration
Die Dauer der Veränderung – Angabe einer Zeit für alle oder kommagetrennt je „transition-property“ Eigenschaft
transition-timing-function
Bézierkurve á la jQuery Animation, also ob die Animation gleichmäßig abläuft linear oder ease-Kurven.
transition-delay
Eine Verzögerung der Veränderung, sozusagen bis die Animation beginnt

Cross-Browser CSS3 Transitions

a {
   color: #000;
   -webkit-transition: color .5s ease-out;
   -moz-transition: color .5s ease-out;
   -o-transition: color .5s ease-out;
   transition: color .5s ease-out;
}
a:hover {
  color: #f00;
}

Die Shorthand-Schreibweise von transition ist ähnlich der Border-Shorthand Schreibweise, also hintereinander geschrieben mit Leerzeichen, im Beispiel oben wird also die Farbe jedes Links bei Mouseover von schwarz (#000) zu rot (#f00) verändert. Genau 0,5 Sekunden lang wobei die Transition am Anfang stärker als am Ende der 0,5s ist (ease-out).

Beispiel: Social-Icon Links

Rechts in der Sidebar habe ich einige Social-Icons eingebaut und mit ein paar Links belegt. Bei Mouseover wird Tool-Tip-mäßig das „Linkziel“ eingeblendet.

Das HTML dazu

<ul class="social">
   <li class="tweet">
      <a href="http://twitter.com/maddesigns">
         <strong>Twitter</strong>
      </a>
   </li>
   <li class="facebook">
      <a href="http://www.facebook.com/maddesigns.webdeveloper">
         <strong>Facebook</strong>
      </a>
   </li>
   ...
</ul>

CSS

.social {list-style: none outside none;}
.social li {float:left; margin: 0 4px 0 0 }
.social li a { 
  display:block; 
  width:48px; 
  height:48px; 
  position:relative; 
}
.social li a strong { 
  position:absolute; 
  left:15px; 
  top:-1px;
  text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); 
  background-color:rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 5px;

  -moz-border-radius:3px;   
  -webkit-border-radius:3px;  
  border-radius:3px; 

  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

li.facebook { background-image:url("facebook-48x48.png"); }
li.tweet { background-image:url("twitter-48x48.png"); }
li.tumblr { background-image:url("tumblr-48x48.png"); }
li.xing { background-image:url("xing-48x48.png"); }
li.rss { background-image:url("feed-48x48.png"); }

.social:hover li { opacity:0.2; }

.social li { 
  -webkit-transition-property: opacity; 
  -webkit-transition-duration: 500ms; 
  -moz-transition-property: opacity; 
  -moz-transition-duration: 500ms; 
  -o-transition-property: opacity; 
  -o-transition-duration: 500ms;
  transition-property: opacity; 
  transition-duration: 500ms; 
}
.social li a strong { opacity:0;
  -webkit-transition-property: opacity, top; 
  -webkit-transition-duration: 300ms;
  -moz-transition-property: opacity, top; 
  -moz-transition-duration: 300ms;
  -o-transition-property: opacity, top; 
  -o-transition-duration: 300ms;
  transition-property: opacity, top; 
  transition-duration: 300ms;
}

.social li:hover { opacity:1; }
.social li:hover a strong { opacity:1; top:-20px; }

Links:

Eigenschaften die animiert werden können (Firefox)
Social Icons Display (Original Tutorial & jQuery Fallback von Marcofolio.net)
Understanding CSS3 Transitions Kapitel 2 aus dem Buch „CSS3 for Web Designers“
Faruk Ateş Website Social Links Leiste rechts
CSS Transitions 101

Browser-Support:

Supported in Safari 3.1+, Chrome 3+, Opera 10.5+ und Firefox ab der Version 4

Am Tag 22 geht es im Webstandard-Blog mit „HSLA“ weiter.