Depot43-Unterlagen - Transition

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
	<meta charset=utf-8>
	<title>HTML5 Flex CSS - Transition</title>
	<style>
    div.box {
        width: 100px;
        height: 100px;
        background: red;
        -webkit-transition: width 2s;
        transition: width 2s;
    }

    div:hover {
        width: 400px;
    }
	</style>
</head>
<body>
<div class="box"> Darüber fahren!</div>
</body>
</html>


 

            

Hinweis

Das HTML-Element wird mit CSS formatiert. Die Eigenschaft "transition" enthält die animierte CSS-Eigenschaft und die Dauer der Animation.

transition: width 2s;

Für ältere Webkit-Browser:

-webkit-transition: width 2s;

Ausgelöst wird die transition durch den Event des darüberfahrens. Im Pseudoelement ":hover" ist einen anderen Wert deklariert als im ausgehenden Div-Element.

Es ist erforderlich, die gleiche CSS-Eigenschaft mit unterschiedlichen Werten für den Start und das Ende der transition zu benennen.