« Zurück zum Artikel

Beispiel 3

Bitte einmal mit der Maus über die Boxen unten fahren.

#test1
#test2
#test3
#test4



Hier der zugehörige CSS-Code:

.box {
	background: #dddddd;
	font-size: 100%;
	border: 1px solid #000000;
	width: 500px;
	padding: 5px;
	color: #000000;
}

.box div {
	display: inline-block;
	width: 100px;
	border: 1px solid #000000;
	background: #aaaaaa;
	margin: 5px;
	padding: 5px;
	text-align: center;
	position: relative;
	left: 0px;
}

#test1:hover {
	animation-name: schuetteln;
}

#test2:hover {
	animation-name: blinken;
}

#test3:hover {
	animation-name: wachsen;
}

#test4:hover {
	animation-name: faerben;
}

.box div:hover {
	animation-duration: 250ms;
	animation-iteration-count: 2;
	animation-direction: alternate;
}

@keyframes schuetteln {
	from, 67% {
		transform: rotate(0deg);
	}
	33% {
		transform: rotate(-5deg);
	}
	to {
		transform: rotate(5deg);
	}
}

@keyframes blinken {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

@keyframes wachsen {
	from {
		transform: scale(1);
	}
	to {
		transform: scale(1.5);
	}
}

@keyframes faerben {
	from {
		color: #000;
		background: #aaa;
		border-color: #000;
	}
	to {
		color: #fff;
		background: #444;
		border-color: #fff;
	}
}