Einblicke in die Informatik => Animationen in CSS

Allgemein, Informatik, MINT •

Als eines der zentralen Themen der Informatik ist die Erstellung von Webseiten in der Einführungsphase mit der Sprache HTML vorgesehen. Die SchülerInnen des Informatik Orientierungs- und Grundkurses haben dazu in den letzten Wochen alles rund um HTML gelernt und auch ihre eigenen Webseiten mit CSS (Cascading Style Sheets) optisch etwas aufgepeppt.

Zum Abschluss des Themas wurde nochmal tief in die Trickkiste gegriffen und viele verschiedene Elemente von CSS in HTML eingebunden. Neben einer Animation mit gleichzeitiger Rotation und Translation eines Bildes, ändert sich auch im Laufe der Animation die Farbe, die Art und die Rundung des festgelegten Rahmens.

Der gesamte Quellcode der Webseite sieht wie folgt aus:

<!DOCTYPE html>
<html lang="DE">
	<head>
		<style>

			h1 {
				text-align: center;
			}
			
			div {
				width: 200px;
				height: 200px;
				border: 15px black dotted;
				position: relative;
				animation-name: example;
				animation-duration: 4s;
				animation-iteration-count: infinite;
				background-image: url(rick.jpg);
				background-size: 250px 200px;
			}

			a {
				position: absolute;
				right: 20%;
				bottom: 20%;
			}

			@keyframes example {
				0% {
					left:20%;
					top:0%;
					transform: scale(0.5,0.5) rotate(00deg);
					border-color: green;
					border-style: solid;
					border-radius: 0px;
				}
				25% {
					left:60%;
					top:0%;
					transform: scale(1,1) rotate(90deg);
					border-color: black;
					border-style: dotted;
					border-radius: 25px;
				}
				50% {
					left:60%;
					top:100%;
					transform: scale(1.5,1.5) rotate(180deg);
					border-color: magenta;
					border-style: dashed;
					border-radius: 50px;
				}
				75% {
					left:20%;
					top:100%;
					transform: scale(1,1) rotate(270deg);
					border-color: red;
					border-style: double;
					border-radius: 75px;
				}
				100% {
					left:20%;
					top:0%;
					transform: scale(0.5,0.5) rotate(360deg);
					border-color: yellow;
					border-style: groove;
					border-radius: 100px;
				}
			}

		</style>
		<title>Ein Beispiel f&uuml;r CSS Animationen in HTML</title>
	</head>
	<body>
		<h1>Ein Beispiel f&uuml;r CSS Animationen in HTML</h1>
		<div></div>
		<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Hier klicken f&uuml;r den passenden Song</a>
	</body>
</html>

Das Ergebnis der HTML Seite mit eingebauter Animation unter Verwendung von CSS ist hier zu sehen (auf dem Server des Nerdclubs gespeichert).

Nach oben scrollen