Kategorie: HTML/CSS
Animationen bringen Bewegung auf die Seite und sorgen für das gewisse Etwas, um sich sich von der Konkurrenz abzuheben. Wählen Sie dezente Effekte und reduzieren Sie die Animationen auf wenige Einsatzbereiche. So wirkt Ihre Seite seriös und modern. Durch CSS3 ist es möglich, Animationen ohne Javascript und mit schnellen Ladezeiten zu realisieren.
Transition bedeutet auf Deutsch Übergang. Effekte mit transition zeichnen sich durch sanfte Übergange aus. Die Elemente verändern sich schrittweise und harmonisch. Die Animation startet nicht automatisch, erst bei einer Aktion (hovern mit der Maus) beginnt der Übergang.
Der User bewegt die Maus über einen Button und die Hintergrundfarbe wechselt. Die Farbänderung erfolgt sofort.
<a class="button" href="#">Button</a>
.button{
background-color:black;
color:white;
padding:12px 9px;
text-decoration:none;
}
.button:hover{
color:white;
background-color:green;
}
Ergänzen Sie die CSS-Eigenschaft transition. Bewegen Sie die Maus über den Button, die Hintergrundfarbe ändert sich nun schrittweise. Das wirkt natürlicher und angenehmer.
<a class="button transition" href="#">Button</a>
.transition{
transition-property:background-color;
transition-duration:2s;
}
Mit transition-property legen Sie die Eigenschaft fest, auf die sich transition bezieht. Durch transition-duration bestimmen Sie die Dauer des Übergangs.
Zusätzlich geben Sie, falls erwünscht, mit der transition-timing-function noch den Verlauf der Animation an. Lassen Sie diese Angabe weg, erfolgt die Veränderung gleichbleibend (linear). Mit transition-timing-function: ease-in startet die Animation langsam und wird dann schneller. Der Befehl transition-timing-function: ease-out ease-out bewirkt das Gegenteil, also einen schnellen Start und dann eine Verlangsamung.
<a class="b_neu" href="#">Button</a>
.b_neu{
background-color:black;
color:white;
padding:12px 9px;
text-decoration:none;
}
.b_neu:hover{
color:white;
padding-right:120px;
transition-property:padding;
transition-duration:3s;
}
Die Breite des Button ändert sich beim hovern mit der Maus. Die Änderung erfolgt in gleichmäßiger Geschwindigkeit. Dabei ist es egal, ob Sie die Angabe transition-timing-function: linear einfügen oder nicht, weil es sich hierbei und die Standardeinstellung handelt.
<a class="b_neu in" href="#">Button</a>
.in{
transition-timing-function: ease-in;
}
<a class="b_neu out" href="#">Button</a>
.out{
transition-timing-function: ease-out;
}
<a class="b_neu del" href="#">Button</a>
.del{
transition-delay: 2s;
}
Bewegen Sie die Maus auf den Button. Die Animation startet mit 2 Sekunden Verzögerung.
CSS3 transition besteht aus den 4 in der Tabelle abgebildeten Angaben.
| transition-property: | Auf welche CSS-Eigenschaft bezieht sich die transition. |
| transition-duration : | Wie lange dauert die transition? |
| transition-timinig-function ⏳ | Wie läuft die transition ab? Gleichmäßig? Erst schnell dann langsam? |
| transition-delay ⏱ | Soll die transition verzögert starten? |
Listen Sie die Befehle nicht einzeln auf. Nutzen Sie die Kurzschreibweise:
| property | duration | timing-function | delay | |
| transition: | background | 4s | ease-in | 1s; |
Die ausführliche Schreibweise:
.a_effekt{
transition-property:background;
transition-duration:4s;
transition-timinig-function:ease-in;
transition-delay:1s;
}
enstpricht somit:
.a_effekt{
transition:background 4s ease-in 1s;
}
Effekt
Gehen Sie mit der Maus auf den Button.
Der Hintergrund (transition-property:background;) ändert sich innerhalb von 4 Sekunden (transition-duration:4s;), die Änderung erfolgt erst langsam und dann schnell (transition-timinig-function:ease-in;)und fängt nach einer Verzögerung von 1 Sekunde (transition-delay:1s;) an.
Laden Sie alle Beispiele aus diesem Beitrag im zip-Format runter.
▶ Beispieldatei runterladen
Mit CSS transform verändern Sie die Objekte auf Ihrer Website. Verschieben, vergrößern, verkleinern, drehen oder scheren Sie HTML-Elemente. Inhalt CSS transform:translate – Objekte verschieben CSS transform:rotate – Objekte drehen CSS
Die HTML-Elemente mit denen Textabschnitte kursiv oder fett ausgezeichnet werden können sind allgemein bekannt. Es gibt jedoch auch einige weniger bekannte Elemente mit denen Textelemente formatiert werden können. Inhalt HTML
Es gibt in HTML zwei grundsätzliche Arten von Elementen: Block und Inline-Elemente. Beide Arten von Elementen haben unterschiedliche Eigenschaften. Die Kenntnis dieser Eigenschaften ist die Grundlage für einen korrekten HTML-Code
Der HTML-Quellcode einer Internetseite sollte übersichtlich, möglichst schmal und selbsterklärend sein. Ein übersichtlicher Quellcode kann leichter und vor allem schneller verändert werden. Je schmaler der Quellcode ist, umso geringer ist
Auf jeder gewerblichen Webseite befinden sich die Adressdaten der Firma, zu der die Webseite gehört. Die Daten können auf verschiedene Weise durch HTML-Code dargestellt werden. Im folgenden Artikel wird kurz
