Start

Der Begriff MicroCss bezieht sich auf Animationen, die mit CSS erstellt werden, meistens aber auch kleine "Helper" zur Unterstützung der "usability". Formularfelder die ihre Farbe anpassen, Ikonen die Form oder Farbe verändern um dem User mitzuteilen, dass eine Eintrag korrekt oder mangelhaft sei. Menü-Buttons die reaktionsfähig sind und durch Farb- oder Formveränderung ihren Zustand anzeigen.

In der Gestaltung werden Schriften ein- ausgeblendet, Bilder weicher eingeblendet oder durch leicht ansteigenden Schattenwurf vom Rest der Seite abgehoben um damit anzuzeigen, dass es sich um ein dynamisches Objekt, eine Galerie handelt. Meist werden MicroCss-Animationen sehr zurückhaltend eingesetzt, sie wirken als "stille Hilfestellungen im Hintergrund".

Der Quelltext wurde erfolgreich in die Zwischenablage kopiert.

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
	<meta charset=utf-8>
	<title>HTML5 Flex CSS - Start</title>
	<style>
		div.anim {
			width: 100px;
			height: 100px;
			background: red;
			position :relative;
			animation: myanim 15s infinite;
		}

		@keyframes myanim {
			0%   {top: 0px; left: 0px; background: red;}
			25%  {top: 0px; left: 300px; background: blue;}
			50%  {top: 100px; left: 300px; background: black;}
			75%  {top: 100px; left: 0px; background: grey;}
			100% {top: 0px; left: 0px; background: red;}
		}
	</style>
</head>
<body>
	<p>CSS bewegt!</p>

	<div class="anim"></div>
</body>
</html>


 

            

Animation CSS3-Eigenschaft:

animation-delay: Verzögerung des Starts der Animationssequenz.
animation-direction: Abspielrichtung / zum Startpunkt zurück / Wiederholungen
animation-duration: Dauer der Animation für einen kompletten Durchgang
animation-iteration-count: Anzahl Wiederholungen / mit "infinite" wird unendlich wiederholt
animation-name: Spezifiziert den Namen der @keyframes-Regel, welche die einzelnen Keyframes beschreibt.
animation-play-state: Pausieren / Wiederaufnehmen einer Animationssequenz.
animation-timing-function: Konfiguriert das Timing der Animation
animation-fill-mode: CSS Stile, die auf das animierte Element angewendet werden

DB-Table: csstest