[xyz-ihs snippet=“css-und-html“]
<!DOCTYPE html>
<html lang="de">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 transition Beispiele - kr@nner.net</title>
<style>
div{
padding:10px 5px;
}
.button{
background-color:black;
color:white;
padding:12px 9px;
text-decoration:none;
}
.button:hover{
color:white;
background-color:green;
}
.transition{
transition-property:background-color;
transition-duration:2s;
}
.b_neu{
background-color:black;
color:white;
padding:12px 9px;
text-decoration:none;
}
.b_neu:hover{
color:white;
padding-right:120px;
transition-property:padding;
transition-duration:3s;
}
.in{
transition-timing-function: ease-in;
}
.out{
transition-timing-function: ease-out;
}
.del{
transition-delay: 2s;
}
.a_effekt{
background:green;
color:white;
padding:12px;
}
.a_effekt:hover{
background:red;
color:white;
}
.a_effekt{
transition:background 4s ease-in 1s;
}
</style>
</head>
<body>
<div>
<h1>CSS3 Animationen: transition erklärt</h1>
<h2>Hover-Effekt ohne transition</h2>
<a class="button" href="#">Button</a>
</div>
<div>
<h2>Hover-Effekt mit transition</h2>
<a class="button transition" href="#">Button</a>
</div>
<div>
<h2>Veränderung in gleichä���iger Geschwindigkeit</h2>
<a class="b_neu" href="#">Button</a>
</div>
<div>
<h2>Erst langsam, dann schnell transition-timing-function: ease-in</h2>
<a class="b_neu in" href="#">Button</a>
</div>
<div>
<h2>Erst schnell, dann langsam transition-timing-function: ease-out</h2>
<a class="b_neu out" href="#">Button</a>
</div>
<div>
<h2>Animation mit Verzögerung starten durch transition-delay</h2>
<a class="b_neu del" href="#">Button</a>
</div>
<div>
<h2>Kurzschreibweise von CSS3-transition</h2>
<a class="a_effekt" href="#">Effekt</a>
</div>
</body>
</html>