Depot43-Unterlagen - Transition Box

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
	<meta charset=utf-8>
	<title>HTML5 Flex CSS - Transition Box</title>
	<style>
		div.box {
			border-style: solid;
			border-width: 1px;
			display: block;
			margin: 50px 200px;
			padding: 20px;
			width: 100px;
			height: 100px;
			background-color: #0000FF;
			-webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s;
			transition: width 2s, height 2s, background-color 2s, transform 2s;
		}

		div.box:hover {
			background-color: #FF0000;
			width: 200px;
			height: 200px;
			-webkit-transform: rotate(180deg);
			transform: rotate(180deg);
		}
	</style>
</head>
<body>
    <div class="box">Beispielbox</div>
</body>
</html>


 

            

Hinweis

Es können mehrere CSS-Eigenschaften gleichzeitig verändert werden mit "transition". Die Div-"box" wird innerhalb von 2 Sekunden transformiert. Breite, Höhe und Hintergrundfarbe wechseln beim darüberfahren.