Advitum.de auf Google+

CSS Animation Tutorial: hypnotische Spirale

CSS Animation Tutorial: hypnotische Spirale
VN:F [1.9.22_1171]
Bewertung: 5.0/5 (4 Stimmen abgegeben)
Von am
Kategorien: CSS, Programmieren, Tutorials

Vor ein paar Tagen habe ich ein interessantes Gif gesehen, eine Animation einiger konzentrischer Halbkreise, die unterschiedlich schnell rotieren. Ich war drauf und dran, den gleichen Effekt mit ein bisschen JavaScript nachzubauen, als ich bemerkte, dass der gleiche Effekt sehr einfach mit CSS erzielt werden kann.

In diesem Artikel wende ich CSS-Animationen an, um einen interessanten Effekt zu erzielen.

CSS Animation Tutorial: hypnotische Spirale, 5.0 out of 5 based on 4 ratings

Zuerst das Resultat

Schritt 1: HTML

Als erstes brauchen wir etwas HTML. Für jeden Halbkreis erstellen wir ein eigenes DIV.

<div id="spiral">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>

Schritt 2: (S)CSS

Ich benutze inzwischen fast überwiegend SCSS (und Compass), aber der gleiche Effekt lässt sich ohne weiteres auch mit einfachem CSS realisieren.

Zunächst definiere ich ein paar Variablen.

$speed: 8s;
$count: 16;
$barWidth: 15px;
$gapWidth: 1px;

$speed ist die Zeit, die die gesamte Animation für einen Durchlauf benötigt. $count ist die Anzahl der DIVs, die wir in unserem HTML eingefügt haben. $barWidth und $gapWidth definieren die Breite der Rahmen und den Zwischenraum dazwischen.

#spiral {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	
	div {
		@include transform(rotate(45deg));
		@include border-radius(50%);
		
		border: $barWidth solid transparent;
		border-top-color: #000000;
		border-left-color: #000000;
		position: absolute;
	}
}

Hier sorgen wir zunächst dafür, dass die Animation im Zentrum steht. Anschließend geben wir jedem DIV den entsprechenden Rahmen. Allerdings braucht jedes DIV eine andere Breite und eine andere Position. Zum Glück sind beide Werte vom Index des DIV abhängig. Also iterieren wir mit SCSS über die 16 DIVs und definieren für jedes DIV die entsprechenden Werte.

@for $i from 1 through $count {
	#spiral div:nth-child(#{$i}) {
		width: 2 * ($i - 1) * ($barWidth + $gapWidth);
		height: 2 * ($i - 1) * ($barWidth + $gapWidth);
		top: -1 * $i * ($barWidth + $gapWidth);
		left: -1 * $i * ($barWidth + $gapWidth);
	}
}

Wichtig ist hier: Jedes DIV ist größer als das vorherige und muss entsprechend auch weiter nach links und oben versetzt werden.

Schritt 3: Animation

Als nächstes folgt die Animation. Auch hier wird für jedes DIV eine unterschiedliche Animation definiert. Das kleinste DIV rotiert während der Animation genau ein mal, das zweite DIV zwei mal und so weiter. So erweitern wir also unsere For-Schleife:

@for $i from 1 through $count {
	@include keyframes(rotate-#{$i}) {
		0% {
			@include transform(rotate(45deg));
		}
		
		100% {
			@include transform(rotate(45deg - $i * 360deg));
		}
	}
	
	#spiral div:nth-child(#{$i}) {
		@include animation(rotate-#{$i} $speed ease-in-out infinite);
		
		width: 2 * ($i - 1) * ($barWidth + $gapWidth);
		height: 2 * ($i - 1) * ($barWidth + $gapWidth);
		top: -1 * $i * ($barWidth + $gapWidth);
		left: -1 * $i * ($barWidth + $gapWidth);
	}
}

Das war auch schon alles.

Ganz ohne JavaScript lässt sich so eine interessante Animation erstellen. Vor einiger Zeit wäre es noch unumgänglich gewesen, um für solch einen Effekt JavaScript zu verwenden.

Natürlich war das nur eine kleine Einführung in CSS-Animationen. Ich wünsche viel Spaß beim Experimentieren!

CSS Animation Tutorial: hypnotische Spirale, 5.0 out of 5 based on 4 ratings

Jetzt seid ihr dran!

Teilt eure Meinung mit uns in den Kommentaren, gebt eine Bewertung für diesen Artikel ab und teilt ihn in Social Networks!

Über

Ich bin ein junger Webdesigner und Programmierer aus Siegen und blogge auf Advitum.de über meine Erfahrungen im Web. Meine Themenschwerpunkte liegen im Bereich der Web-Entwicklung mit PHP, JavaScript, HTML und anderen Script-, Programmier- und Markup-Sprachen, der Nutzung von Content Management System wie Typo3, Wordpress etc. und der Effekt-Hascherei mit Photoshop. Seit 2008 blogge ich auf Advitum.de – mal mehr, mal weniger regelmäßig – über alles, was mich so interessiert. Wenn dir mein Blog gefällt, freue ich mich immer sehr über Feedback in Form von Kommentaren und E-Mails.

Kommentare zu diese Artikel

Schreibe jetzt einen Kommentar!

Diese Artikel könnten dir auch gefallen