CSS Galerie

Willkommen in meiner CSS-Galerie! Hier findest Du ein paar eigens in CSS geschriebene Animationen, gemeinsam mit den dazugehörigen Style-Regeln.

Klick auf die Animationen für mehr Infos.

Lagerfeuer Animation

Eine klassische Infinite-Animation mit @keyframes. Um den HTML-Code so einfach wie möglich zu halten, finden sich im CSS außerdem eine Reihe Pseudo-Elementen und :nth-child Selektoren. Sieht ganz nett aus.

:root {
	--wood-dark:  	#26180f;
	--wood-light: 	#383124;
	--fire-red:		#bd0000;
	--fire-orange:	#d65200;
	--fire-yellow:	#ffa600;
}
.fire {
	position: relative;
	width: 100%; height: 100%;
	margin: 0 auto; 
}
.fire * { position: absolute; }
.fire > div { width: 100%; height: 100%; }
.fire > [name="wood"] > div {
	width: 20%; height: 20%;
	bottom: 0; margin: 0 40%;
	border-radius: 50%;
	background-color: var(--wood-dark);
}
.fire > [name="wood"] :nth-child(1) { margin: 0 25% 0 55%; }
.fire > [name="wood"] :nth-child(2) { margin: 0 55% 0 25%; }
.fire > [name="wood"] > div::before, .fire > [name="wood"] > div::after {
	content: ''; position: absolute;
	width: 90%; height: 90%; 
	border-radius: 50%; margin: 5% 0 0 5%;
	background-color: var(--wood-light);
}
.fire > [name="wood"] > div::after {
	width: 50%; height: 50%; margin: 25% 0 0 25%;
	background-color: var(--wood-dark);
}

.fire > [name="flames"] > div {
	bottom: 12%;
	background-color: var(--fire-red);
	border-radius: 0 100% 50% 50% / 0 50% 50% 60%; 
	transform: rotate(40deg);
}
.fire > [name="flames"] > div::before, .fire > [name="flames"] > div::after {
	content: ''; 
	position: absolute;
	width: 80%; height: 80%;
	margin: 10% 0 0 10%;
	background-color: var(--fire-orange);
	border-radius: 0 100% 50% 50% / 0 50% 50% 60%;
	animation: 1.25s fire-flame-3 infinite;
}
.fire > [name="flames"] > div::after {
	width: 50%; height: 50%;
	margin: 25% 0 0 25%;
	background-color: var(--fire-yellow);
	animation: 0.75s fire-flame-4 0.25s infinite;
}
.fire > [name="flames"] :nth-child(1) {
	width: 25%; height: 25%; margin: 0 20% 0 55%;
	animation: 1.5s fire-flame-2 0.2s infinite;
}
.fire > [name="flames"] :nth-child(2) {
	width: 25%; height: 25%; margin: 0 55% 0 20%;
	animation: 1.5s fire-flame-2 0.1s infinite;
}
.fire > [name="flames"] :nth-child(3) { 
	width: 40%; height: 40%; margin: 0 30%;
	animation: 1.5s fire-flame-1 infinite;
}

.fire > [name="shine"] {
	opacity: 0.5; bottom: -10%;
	background: rgb(255,224,0);
	background: radial-gradient(
		circle, 
		rgba(255,224,0,0.3) 0%, 
		rgba(230,41,3,0.2) 30%, 
		rgba(0,0,0,0) 70%
	);
	animation: 1s fire-shine infinite;
}

@keyframes fire-flame-1 {
	25%  { width: 45%; height: 45%; }
	50%  {
		width: 40%; height: 40%;
		transform: rotate(50deg); 
		border-radius: 0 60% 50% 50% / 0 50% 50% 100%;
	}
	75%  { width: 45%; height: 45%; }
}
@keyframes fire-flame-2 {
	25%  { width: 30%; height: 30%; }
	50%  {
		width: 25%; height: 25%;
		transform: rotate(50deg); 
		border-radius: 0 60% 50% 50% / 0 50% 50% 100%;
	}
	75%  { width: 30%; height: 30%; }
}
@keyframes fire-flame-3 { 50% { width: 70%; height: 70%; margin: 15% 0 0 15%; } }
@keyframes fire-flame-4 { 50% { width: 40%; height: 40%; margin: 35% 0 0 35%; } }
@keyframes fire-shine {
	50% { opacity: 1; }
}

<div class="fire">
	<div name="wood">
		<div></div>
		<div></div>
		<div></div>
	</div>
	<div name="flames">
		<div></div>
		<div></div>
		<div></div>
	</div>
	<div name="shine"></div>
</div>

Katzen Animation

Eine Katze, die ins Bild huscht, zwinkert, und den Kopf wieder weg zieht. Ohren, Nase und Augen hinken beim Hochkommen leicht hinterher, damit die Bewegung natürlicher aussieht. Das Timing läuft über eine globale Variable im :root-Element. Ein kritischer Punkt ist die Rahmenbreite der Boxen, die die geschlossenen Augen und den Mund ausmachen. Das funktioniert nicht mit Prozentangaben, und wird deswegen über eine globale Variable geregelt, die in einer Media-Query an die Bildschirmgröße angepasst wird.

:root {
	--cat-time: 4s;
	--cat-color: black;
	--cat-color-2: gray;
	--cat-eye-color: rgb(255,200,0);
	--cat-border: 8px;
}

.cat {
	position: relative;
	width: 100%; height: 100%;
	margin: 0 auto;
	overflow: hidden;
	
	animation: moveup var(--cat-time) infinite;
}
.cat * { background-color: var(--cat-color); }
.cat [name="head"] {
	position: absolute; 
	bottom: 0;
	width: 100%; height: 80%;
	border-radius: 50% 50% 0 0 / 80% 80% 0 0;
}

/* Ohren */
.cat [name="head"]::before, 
.cat [name="head"]::after {
	content: '';
	position: absolute;
	left: 5%;
	width: 35%; aspect-ratio: 1/1;
	background-color: var(--cat-color);
	border-radius: 10% 100% 0 20% / 10% 20% 0 100%;
	transform: rotate(10deg);
	
	animation: ear-tilt-left var(--cat-time) infinite;
}
.cat [name="head"]::after {
	left: auto; right: 5%;
	border-radius: 100% 10% 20% 0 / 20% 10% 100% 0;
	transform: rotate(-10deg);
	
	animation: ear-tilt-right var(--cat-time) infinite;
}

/* Augen */
.cat [name="eye"] {
	position: absolute;
	width: 30%; aspect-ratio: 1/1;
	border-radius: 50%;
	background-color: var(--cat-eye-color);
	z-index: 1;
	opacity: 1;
	
	animation: 	blink-1 var(--cat-time) infinite, 
				moveup-2 var(--cat-time) infinite;
}
.cat [name="eye"]::before, 
.cat [name="eye"]::after {
	content: '';
	position: absolute;
	width: 50%; height: 50%;
	margin: 25%;
	border-radius: 50%;
	background-color: black;
}
.cat [name="eye"]::after {
	background-color: white;
	width: 25%; height: 25%;
}
.cat [name="head"] > :nth-child(1) { margin: 18% 18% 0 52%; }
.cat [name="head"] > :nth-child(2) { margin: 18% 52% 0 18%; }
.cat [name="eye-closed"] {
	position: absolute;
	width: 20%; aspect-ratio: 1/1; top: 35%;
	
	border-radius: 0 0 100% 0 / 0 0 100% 0;
	padding: 0 3% 3% 0;
	box-sizing: border-box;
	
	background-color: var(--cat-color-2);
	
	transform: rotate(45deg);
	z-index: 1;
	opacity: 0;
	
	animation: blink-2 var(--cat-time) infinite;
}
.cat [name="eye-closed"]::after {
	content: ''; display: block;
	width: 100%; height: 100%;
	background-color: var(--cat-color);
	border-radius: 0 0 100% 0 / 0 0 100% 0;
}
.cat [name="head"] > :nth-child(3) { margin: 0 57% 0 23%; }
.cat [name="head"] > :nth-child(4) { margin: 0 23% 0 57%; }

/* Nase */
.cat [name="nose"] {
	position: absolute;
	width: 5%; aspect-ratio: 1/1;
	margin: 47.5%;
	border-radius: 100% 40% 10% 40% / 100% 40% 10% 40%;
	transform: rotate(45deg);
	background-color: var(--cat-color-2);
	
	animation: moveup-2 var(--cat-time) infinite;
}

/* Mund */
.cat [name="mouth-left"], 
.cat [name="mouth-right"] {
	position: absolute; 
	left: -95%; top: 95%;
	width: 200%; height: 200%;
	border-radius: 0 0 100% 0 / 0 0 100% 0;
	box-sizing: border-box;
	background-color: var(--cat-color-2);
	padding: 0 40% 40% 0;
}
.cat [name="mouth-right"] {
	left: 95%; top: -95%;
}
.cat [name="mouth-left"]::after, 
.cat [name="mouth-right"]::after {
	content: ''; display: block;
	width: 100%; height: 100%;
	background-color: var(--cat-color);
	border-radius: 0 0 100% 0 / 0 0 100% 0;
}

@keyframes moveup {
	0% { top: 100%; }
	10%,90% { top: 0%; }
	100% { top: 100%; }
}
@keyframes moveup-2 {
	0% { top: 30%; }
	13% { top: 0%; }
}
@keyframes ear-tilt-left {
	0% { transform: rotate(-30deg); }
	10%, 90% { transform: rotate(10deg); }
	100% { transform: rotate(15deg); }
}
@keyframes ear-tilt-right {
	0% { transform: rotate(30deg); }
	10%, 90% { transform: rotate(-10deg); }
	100% { transform: rotate(-15deg); }
}
@keyframes blink-1 {
	0%, 49%  { opacity: 1; }
	50%, 59% { opacity: 0; }
	60% { opacity: 1; }
}
@keyframes blink-2 {
	0%, 49%  { opacity: 0; }
	50%, 59% { opacity: 1; }
	60% { opacity: 0; }
}

<div class="cat">
	<div name="head">
		<div name="eye"></div> 
		<div name="eye"></div>
		<div name="eye-closed"></div> 
		<div name="eye-closed"></div>
		<div name="nose">
			<div name="mouth-left"></div>
			<div name="mouth-right"></div>											
		</div>
	</div>
</div>

Raddampfer

Ein Raddampfer, der über einen Fluss brettert. Wie zu vermuten, eine sehr aufwendige Animation mit einer ordentlichen Reihe an Elementen. Wichtig ist hier vor allem die overflow-Styleregel, die verhindert, dass die Bäume und Berge aus dem Bild herausfliegen.

:root {
	--sky-color: 	#b0f4ff;
	--land-color:	#329938;
	--water-color:	rgb(60,60,200);
	
	--tree-c-1: #382c21;
	--tree-c-2: #012402;
	--hill-c-1: #505cba;
	--hill-c-2: #959ff0;
	
	--hull-color: 	 rgb(0,0,80);
	--chimney-color: rgb(200,20,20);
	--deck-color: 	 rgb(255,250,240);
	--deck-color-2:	 rgb(230,210,180);
	--deck-color-3:	 rgb(200,180,150);
	--win-color:	 rgb(100,0,0);
	--boat-accent: 	 rgb(240,200,100);
	--wheel-c-1:	 var(--deck-color-2);
	--wheel-c-2:	 var(--deck-color-3);
	
	--hull-shadow:	  rgb(0,0,0);
	--win-shadow:	  rgb(20,20,20);
	--roof-shadow:	  rgb(220,220,220);
	--chimney-shadow: rgb(100,0,0);
	--wheel-shadow:	  rgb(130,100,100);
	
	--boat-rock-time: 3s;
	--chimney-time: 1s;
}

.steamer {
	position: relative;
	width: 100%; height: 100%;
	overflow: hidden;
}
.steamer * { position: absolute; box-sizing: border-box; }

/* Hintergrund */
.steamer .bg {
	width: 100%; height: 100%;
}

.steamer [name="sky"], 
.steamer [name="land"], 
.steamer [name="water"] {
	width: 100%; bottom: 0;
} 
.steamer [name="sky"]   { height: 100%; background-color: var(--sky-color); }
.steamer [name="land"]  { height: 30%;  background-color: var(--land-color); }
.steamer [name="water"] { height: 20%;  background-color: var(--water-color); }

/* Berge */
.steamer [name="hills"] {
	bottom: 30%; width: 100%; aspect-ratio: 3/2;
}
.steamer [name="hills"] > div {
	bottom: -40%; left: -100%;
	width: 50%; aspect-ratio: 1/1;
	background-color: var(--hill-c-1);
	transform: rotate(-45deg);
}
.steamer [name="hills"] > div::before, 
.steamer [name="hills"] > div::after {
	content: ''; position: absolute;
	right: 0; top: 0;
	width: 40%; height: 100%;
	border-radius: 100% 0 0 0;
	background-color: var(--hill-c-2);
} 
.steamer [name="hills"] > div::after {
	width: 20%; height: 20%;
	border-radius: 0 0 0 100%;
	background-color: white;
}
.steamer [name="hills"] > div:nth-child(1) { bottom: -40%; animation: hill-move 30s  0s  linear infinite; }
.steamer [name="hills"] > div:nth-child(2) { bottom: -45%; animation: hill-move 20s  10s linear infinite; }
.steamer [name="hills"] > div:nth-child(3) { bottom: -47%; animation: hill-move 15s  0s  linear infinite; }
.steamer [name="hills"] > div:nth-child(4) { bottom: -50%; animation: hill-move 10s  5s  linear infinite; }

/* Bäume */
.steamer [name="trees"] {
	width: 100%; height: 50%;
	left: 0; bottom: 22%; 
	animation: trees-move 5s linear infinite;
}
.steamer [name="trees"] > div {
	position: absolute;
	height: 40%; width: 5%;
	bottom: 0%; left: 110%;
	background-color: var(--tree-c-1);
}
.steamer [name="trees"] > div:nth-child(1) { bottom: 0%; left: 110%; }
.steamer [name="trees"] > div:nth-child(2) { bottom: 5%; left: 180%; }
.steamer [name="trees"] > div:nth-child(3) { bottom: 0%; left: 270%; }
.steamer [name="trees"] > div:nth-child(4) { bottom: 5%; left: 380%; }

/* Blätter */
.steamer [name="trees"] > div > p {
	position: absolute;
	top: -20%; left: -100%;
	width: 300%;
	padding-bottom: 300%;
	background-color: var(--tree-c-2);
	transform: rotate(-45deg);
}
.steamer [name="trees"] > div > p::before,
.steamer [name="trees"] > div > p::after {
	content: ''; 
	position: absolute;
	bottom: 60%; left: 60%;
	width: 75%; height: 75%;
	background-color: var(--tree-c-2);
}
.steamer [name="trees"] > div > p::after {
	bottom: 110%; left: 110%;
	width: 60%; height: 60%;
}

@keyframes hill-move { 0% { left: 120% } 100% { left: -120% } }
@keyframes trees-move { 0% { left: 0 } 100% { left: -400% } }

/* Boot */
.steamer .boat {
	width: 70%; height: 45%;
	bottom: 0; left: 0; right: 0; margin: 5% auto;
	animation: boat-rock var(--boat-rock-time) linear infinite;
}
.steamer [name="hull"] {
	bottom: 0;
	width: 100%; height: 30%;
	border-radius: 0 0 15% 10% / 0 0 80% 50%;
	background-color: var(--hull-color);
	
	box-shadow: inset 0 -2em 0 var(--hull-shadow);
}
.steamer [name="deck"] {
	bottom: 30%;
	width: 100%; height: 5%;
	background-color: var(--deck-color);
	z-index: 10;
}

/* Rettungsringe */
.steamer [name="deck"] > div {
	height: 300%; aspect-ratio: 1/1;
	top: 20px; left: 20px;
	font-size: 100%;
	border-radius: 50%;
	background-color: rgb(220,0,0);
	mask-image: radial-gradient(circle, rgba(0, 0, 0, 0) 35%, black 36%);
}
.steamer [name="deck"] > div::before, .steamer [name="deck"] > div::after {
	content: '';
	position: absolute;
	width: 20%; height: 100%; left: 40%;
	background-color: var(--deck-color-2);
}
.steamer [name="deck"] > div::after { 
	width: 100%; height: 20%; 
	left: 0; top: 40%;
}
.steamer [name="deck"] > div:nth-child(1) { transform: rotate(20deg);  top: 30%; left: 5%; }
.steamer [name="deck"] > div:nth-child(2) { transform: rotate(-10deg); top: 30%; left: 15%; }
.steamer [name="deck"] > div:nth-child(3) { transform: rotate(40deg);  top: 30%; left: 25%; }

/* Etagen */
.steamer .floor {
	bottom: 34%;
	display: flex; justify-content: space-around; align-items: center;
	height: 25%; width: 60%;
	background-color: var(--deck-color);
	z-index: 9;
	box-shadow: inset 0 1em 0 var(--roof-shadow);
}
.steamer .floor::before {
	content: '';
	position: absolute; top: 0;
	width: 110%; height: 10%; font-size: 50%;
	background-color: var(--deck-color-2);
	border-radius: 10%;
}
.steamer .floor[name="floor-1"] { left: 15%; }
.steamer .floor[name="floor-2"] { bottom: 59%; left: 40%; height: 20%; width: 30%; }

/* Fenster */
.steamer .floor > div {
	position: relative;
	height: 60%; margin-top: 5%; aspect-ratio: 3/4;
	border-radius: 50% 50% 0 0;
	background-color: var(--win-color);
	box-shadow: inset 0 1em 0 var(--win-shadow);
}
.steamer [name="floor-1"] {}
.steamer [name="floor-2"] {}
.steamer [name="wheel"] {}

/* Schlot */
.steamer .chimney {
	bottom: 30%; left: 22%;
	width: 10%; height: 70%;
	background-color: var(--chimney-color);
	box-shadow: inset 1em 0 0 var(--chimney-shadow);
	animation: chimney var(--chimney-time) infinite;
}
.steamer .chimney::before, .steamer .chimney::after {
	content: ''; position: absolute;
	top: 0; left: 0; width: 100%; height: 20%;
	background-color: var(--deck-color);
	box-shadow: 
		inset 0 0.6em 0 var(--hull-color), 
		inset 0 -0.6em 0 var(--hull-color);
}
.steamer .chimney::after {
	box-shadow: none;
	top: -4%; left: -10%;
	height: 5%; width: 120%;
	background-color: var(--hull-color);
	border-radius: 20%;
}
.steamer .wheel {
	width: 35%; aspect-ratio: 1/1;
	bottom: -15%; left: 40%;
	border-radius: 50%;
	background-color: var(--wheel-c-1);
	z-index: 11;
}
.steamer .wheel::before, .steamer .wheel::after {
	content: ''; position: absolute;
	width: 80%; height: 80%; top: 10%; left: 10%;
	border-radius: 50%;
	box-shadow: 0 0 0 0.5em var(--boat-accent);
	z-index: -1;
}
.steamer .wheel::after {
	top: 15%; left: 15%;
	width: 70%; height: 70%;
	background-color: var(--wheel-c-2);
	box-shadow: inset 0 1em 0 var(--wheel-shadow);
}
.steamer .wheel [name="planks"] {
	top: 10%; left: 10%;
	width: 80%; height: 80%;
}
.steamer .wheel [name="planks"] > div {
	top: 0; left: 0; right: 0;
	margin: 0 auto;
	width: 5%; height: 100%;
	background-color: var(--wheel-c-1);
}
.steamer .wheel [name="planks"] > div:nth-child(2) { transform: rotate(30deg); }
.steamer .wheel [name="planks"] > div:nth-child(3) { transform: rotate(60deg); }
.steamer .wheel [name="planks"] > div:nth-child(4) { transform: rotate(90deg); }
.steamer .wheel [name="planks"] > div:nth-child(5) { transform: rotate(120deg); }
.steamer .wheel [name="planks"] > div:nth-child(6) { transform: rotate(150deg); }
.steamer .wheel [name="center"] {
	top: 37.5%; left: 37.5%;
	width: 25%; height: 25%;
	border-radius: 50%;
	background-color: var(--wheel-c-1);
}
.steamer .wheel [name="center"]::after {
	content: ''; position: absolute;
	width: 50%; height: 50%; margin: auto;
	border-radius: 50%;
	top: 0; bottom: 0; left: 0; right: 0;
	background-color: var(--boat-accent);
}
.steamer .wheel > [name="turn"] {
	width: 100%; height: 100%;
	animation: wheel-turn 2s linear infinite;
}

@keyframes wheel-turn {
	0% {transform: rotate(0deg); }
	100% {transform: rotate(360deg); }
}
@keyframes chimney {
	0%, 100% { transform: rotate(-10deg) scale(1.2, 0.8) }
	20% { transform: rotate(-10deg) scale(1, 1) }
}
@keyframes boat-rock {
	0%, 100%   { left: 0; bottom: 0%; transform: rotate(-2deg);  }
	70%  { left: -5%; transform: rotate(-5deg); }
	80%  { bottom: 2%; transform: rotate(2deg);   }
	95%  { left: 3%; }
}

<div class="steamer">
	<div class="bg">
		<div name="sky"></div>
		<div name="hills">
			<div></div> <div></div>
			<div></div> <div></div>
		</div>
		<div name="land"></div>
		<div name="trees">
			<div> <p></p> </div>
			<div> <p></p> </div>
			<div> <p></p> </div>
			<div> <p></p> </div>
			<div> <p></p> </div>
		</div>
	</div>
	
	<div name="water"></div>
	<div class="boat">
		<div name = "hull"></div>
		<div name = "deck">
			<div></div> <div></div>
			<div></div>
		</div>
		<div class="floor" name="floor-1">
			<div></div> <div></div>
			<div></div> <div></div>
			<div></div>
		</div>
		<div class="floor" name="floor-2">
			<div></div> <div></div>
			<div></div>
		</div>
		<div class="wheel">
			<div name="turn">
				<div name="planks">
					<div></div> <div></div> 
					<div></div> <div></div>
					<div></div> <div></div>
				</div>
				<div name="center"></div>
			</div>
		</div>
		<div class="chimney"></div>
		<div name="splash"></div>
	</div>
</div>