CSS Animation Tutorial: hypnotische Spirale

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.

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!